vue3+elemeent-plus, el-tooltip的样式修改不生效

Eshine、

已于 2024-11-21 17:00:23 修改

阅读量4.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： tooltip的样式修改不生效 tooltip的样式修改问题修改tooltip背景颜色修改tooltip倒三角背景

于 2023-07-06 11:37:03 首次发布

本文链接：https://blog.csdn.net/listener_life/article/details/131572335

如下代码中，无论如何修改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)