</div>
<div class="bottom">
<button tooltip="下左下左" placement="bottom-left">下左</button>
<button tooltip="下边" placement="bottom" effect="light">下边</button>
<button tooltip="下右" placement="bottom-right">下右</button>
</div>
</div>
css核心代码逻辑实现
hover监听鼠标移入、移出，**[tooltip]**匹配有该属性的标签， after 为气泡， before 为三角形
/* 匹配有tooltip属性的元素 */
[tooltip] {
position: relative;
/* 气泡默认样式 */
&::after {
display: none;
content: attr(tooltip);
}
/* 三角形默认样式 */
&::before {
display: none;
content: '';
}
/* 鼠标移入该元素，显示气泡、三角形 */
&:hover {
&::after {
display: block;
}
&::before {
display: block;
}
}
}现在鼠标移入之后便有效果
为了方便看到效果，测试可以把气泡、三角形默认为block
/* 气泡默认样式 */
&::after {
display: block;
content: attr(tooltip);
}/* 三角形默认样式 */
&::before {
display: block;
content: '';
}
目前效果如下
设置气泡、三角形的默认样式
核心显示当然是设置绝对定位了
/* 气泡默认样式 */
&::after {
display: block;
content: attr(tooltip);
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 15px;
max-width: 200px;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
z-index: 100;
@extend .tooltip-theme-dark; /* 继承默认主题（黑底白字） */
}/* 三角形默认样式 */
&::before {
display: block;
content: '';
position: absolute;
border: 5px solid transparent;
z-index: 100;
@extend .triangle-theme-dark; /* 继承默认主题（黑底） */
}
目前效果如下
定制气泡、三角形主题色
定义好各两种主题
$white: #fff;
$black: #313131;/* 气泡主题 */
.tooltip-theme-dark {
color: $white;
background-color: $black;
}
.tooltip-theme-light {
color: $black;
background-color: $white;
