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

$white: #fff; $black: #313131; /* 气泡主题 */ .tooltip-theme-dark { color: $white; background-color: $black; } .tooltip-theme-light { color: $black; background-color: $white; border: 1px solid $black; } /* 三角形主题 */ .triangle-theme-dark { border-top-color: $black; } .triangle-theme-light { border-top-color: $black; /* 暂时跟dark一样 */ }

定制气泡、三角形位置（只示例一个方向）

/* 气泡位置 */ /*----上----*/ .tooltip-placement-top { bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 0); } .tooltip-placement-top-right { bottom: calc(100% + 10px); left: 100%; transform: translate(-100%, 0) } .tooltip-placement-top-left { bottom: calc(100% + 10px); left: 0; transform: translate(0, 0) } /* 三角形位置 */ /*----上----*/ .triangle-placement-top { bottom: calc(100% + 5px); left: 50%; transform: translate(-50%, 0); } .triangle-placement-top-left { bottom: calc(100% + 5px); left: 10px; } .triangle-placement-top-right { bottom: calc(100% + 5px); right: 10px; }

捕捉位置、主题

这里也算最核心的代码了，用属性选择器来匹配标签上的值，然后设置不同的样式

匹配气泡、三角形主题

&[effect="light"] { &::after { @extend .tooltip-theme-light; } &::before { @extend .triangle-theme-light; } }

匹配气泡、三角形位置，12种位置

（编辑：威海站长网）

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