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;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM