el-tooltip 如何修改样式
el-tooltip标签又popper-class="testtooltip"属性可以给组件建一个选择器名。通过atooltip可以直接修改el-tooltip.
<el-tooltip
placement="bottom"
popper-class="testtooltip">
<div slot="content">
ceshi
</div>
<el-button>Dark</el-button>
</el-tooltip>
不过要注意,写的样式不能写在scoped样式标签里。需要重新写一个样式标签单独放。
<style lang="less">
箭头
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
border-bottom-color: white!important;
}
箭头
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: white !important;
}
内容
.testtooltip{
background: white !important;
box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style>
效果图如下