问题：el-tooltip 只有两种主题，不符合当前的需求
解决方法：自行添加样式
使用 popper-class 为 Tooltip 的 popper 添加类名
因为 tooltip 节点是在组件外生成的，所以需要写全局的样式，不能加 scoped
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <el-tooltip
class="item"
content="查看按需订单"
placement="top"
popper-class="toptip"
>
<span>查看按...</span>
</el-tooltip>
<style lang="scss">
.toptip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
border-top-color: #fff;//三角的边框颜色
}
.toptip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
border-top-color: #fff;//三角的背景颜色
}
.toptip.el-tooltip__popper.is-dark {
color: #2a2b32;//提示文字的颜色
}
.toptip {
background: #fff !important;//提示框的背景颜色
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);//提示框的边框阴影
}
</style>
|