vue3中el-tooltip的样式修改不生效-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中el-tooltip的样式修改不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如下代码中，无论如何修改el-tooltip的样式，都不能生效

<el-tooltip placement="top" effect="dark" :content="content">
    <div>{{ content}}</div>
</el-tooltip>

:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
  background-color: $daping-background-color !important;
}
:deep(.el-popper) {
  width: 31.875rem !important;
}

原因如下：

element-plus中，tl-tooltip的dom结构默认是被追加在body下的，故在app结构下的样式修改是不生效的；具体解决方法如下：

方法一：

<el-tooltip :teleported="false" placement="top" effect="dark" :content="content">
    <div>{{ content}}</div>
</el-tooltip>

<style lang="scss" scoped>
:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
  background-color: #fff !important;
}
:deep(.el-popper) {
  width: 31.875rem !important;
}
</style>

将“teleported”属性设置为false，这样，默认则会不被追加到 `append-to` 的位置，此时修改样式即会生效

方法二：

默认追加到body下的，但是此时可以使用popper-class属性为el-tooltip添加类名【为了不影响其他的tooltip样式，类名最好是唯一的】，然后，再另外写一个style结构，其中，一定不要添加scoped属性，最后即可随意修改el-tooltip的样式，具体代码如下：文章来源地址https://www.toymoban.com/news/detail-545390.html

<el-tooltip placement="top" effect="dark" :content="content" popper-class="my-tooltip">
    <div>{{ content}}</div>
</el-tooltip>


// 此处一定不要加scoped，另外，为了不影响其他地方的tooltip样式，此处的class命名一定要唯一
<style lang="scss">
.my-tooltip {
    background-color:#fff !important;
    width: 31.875rem !important;
    z-index: 10000 !important;
}
</style>

到了这里，关于vue3中el-tooltip的样式修改不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！