Elmentui的tooltip小箭头修改

原创已于 2022-02-19 01:22:47 修改 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #elementui

于 2022-02-19 00:06:00 首次发布

本文介绍了如何在ElementUI中修改tooltip的样式，强调不能在scoped域内操作，而应利用popper-class属性添加自定义类来实现局部样式更改，避免全局影响。

部署运行你感兴趣的模型镜像

因为tooltip是默认挂载到body中的，所以有需要修改tooltip样式的，请勿在scoped域内修改，因为是无法生效的…
改动tooltip的样式会导致全局的样式都会改变，可以使用tooltip的popper-class属性传入自定义的class名，达到只修改自己需要的地方
代码：

        <el-tooltip
          popper-class="btnitem"
          effect="dark"
          content="xxx"
          placement="right"
        >
          <el-button><i class="bi bi-person-lines-fill"></i></el-button>
        </el-tooltip>

CSS:

/* 修改tooltip的right弹出的箭头 有两层一个是:after 
    设置颜色需要将其中一个transparent设置透明掉，不然重叠在一起颜色不对
    其他位置则把right改成自己选择弹出的位置
*/
.btnitem[x-placement^="right"] .popper__arrow {
  border-right-color: transparent !important;
}
.btnitem[x-placement^="right"] .popper__arrow:after {
  border-right-color: rgba(37, 49, 57, 0.7) !important;
}

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率