el-tooltip 如何修改样式

it2025-11-27  6

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>

效果图如下

最新回复(0)