element Tooltip 提示组件修改背景颜色箭头颜色

最新推荐文章于 2024-08-14 14:05:11 发布

jokren

最新推荐文章于 2024-08-14 14:05:11 发布

阅读量6.7k

点赞数 1

分类专栏： vue 文章标签： el-tootip

本文链接：https://blog.csdn.net/jokren/article/details/86511107

版权

vue 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

1,添加自定义类名 popper-class=“atooltip”

<el-tooltip popper-class="atooltip" content="Top Center 提示文字" placement="top">
          <el-button>Dark</el-button>
 </el-tooltip>

2.添加样式

<style>
  // 控制三角形颜色
    .el-tooltip__popper[x-placement^=top] .popper__arrow{
      border-top-color: #1ab394;
    }
    .el-tooltip__popper[x-placement^=top] .popper__arrow:after {
      border-top-color: #1ab394;
    }
    // 控制主题颜色
    .atooltip{
      background: #1ab394 !important;
    }
  </style>

3.注意事项:
(1)方向要根据自己的改变 top right等
(2)style 不要加scoped 锁死样式的话不起作用