el-tooltip 修改全局的样式 (默认的太丑了)

原创已于 2023-12-14 11:40:11 修改

· 1.1k 阅读

9 ·

版权

文章标签：

#前端

于 2023-12-14 11:34:17 首次发布

文章讲述了如何在全局范围内修改ElementUItooltip的样式，包括border-color、box-shadow和颜色，以及如何根据设计需求进行个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认的是黑色的框

话不多说,上代码 :

.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #fff;
  color: #999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #fff;
  color: #999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.atooltip {
  background: #fff !important;
  color: #999 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
::v-deep el-tooltip__popper.is-dark{
  border-right-color: #fff;
  border-top-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #999;
}

记得添加 class 类 popper-class="atooltip"

修改之后的效果