vue2.x el-tooltip 三角箭头修改

<el-tooltip
v-if="row.explanation && row.explanation.length > 10"
popper-class="tableTypePopperClass"
effect="light"
:content="row.explanation"
placement="bottom"
>
<span ref="tableMemberType" class="typeClass">
{{ row.explanation }}
</span>
</el-tooltip>



// 箭头样式是通过两个样式叠加形成的,内部的三角形,及外部的边线,
// 所以想要修改小三角的样式需要同时修改内三角及外边线的样式

// 修改外边线的样式
.tableTypePopperClass[x-placement^=bottom] .popper__arrow{
border-bottom-color: #EBEEF5!important;
}
// 修改内三角的样式
.tableTypePopperClass[x-placement^=bottom] .popper__arrow:after {
border-bottom-color: #FFF!important;
}

// 修改tooltip 从顶部弹出时 箭头的样式
.tableTypePopperClass[x-placement^=top] .popper__arrow{
border-top-color: #EBEEF5!important;
}
.tableTypePopperClass[x-placement^=top] .popper__arrow:after {
border-top-color: #FFF!important;

posted @ 2021-07-27 12:13  摸鱼中  阅读(1981)  评论(0)    收藏  举报