纯css实现（无脚本）Html指令式tooltip文字提示效果

@each $placement in top,top-right,top-left, right,right-top,right-bottom, bottom,bottom-right,bottom-left, left,left-top,left-bottom { &[placement="#{$placement}"] { &::after { @extend .tooltip-placement-#{$placement}; } &::before { @extend .triangle-placement-#{$placement}; } } }

标签不存在placement 属性 / 为空的时候，默认继承top位置

&:not([placement]), &[placement=""] { &::after { @extend .tooltip-placement-top; } &::before { @extend .triangle-placement-top; } }

目前效果如下

让我们把文字放长，把气泡、三角形的默认样式加上display:none看看

 加个动画

分四个方向，上下左右，四个动画

@keyframes anime-top { from { opacity: .5; bottom: 150%; } } @keyframes anime-bottom { from { opacity: .5; top: 150%; } } @keyframes anime-left { from { opacity: .5; right: 150%; } } @keyframes anime-right { from { opacity: .5; left: 150%; } }

匹配气泡位置从而来确定执行哪个动画，用**[attr^=]**选择，如 上左、上右也能匹配到

/* 设置动画 */ @each $placement in top, right, bottom, left { &[placement^="#{$placement}"] { &::after, &::before { animation: anime-#{$placement} 300ms ease-out forwards; } } }

最终效果如下

附上codepen地址  codepen.io/anon/pen/yR …

总结

以上所述是小编给大家介绍的纯css实现（无脚本）Html指令式tooltip文字提示效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!