首页 前端知识 vue el-tooltip 修改默认样式

vue el-tooltip 修改默认样式

2024-06-06 00:06:49 前端知识 前端哥 419 152 我要收藏

1.首先给el-tooptip 加上popper-class

 <el-tooltip placement="top" popper-class="my-tooltip">

 </el-tooltip>

2.添加style样式。注意此时样式需要写在没有 scoped 的style标签里
    

.my-tooltip{
  background: #fff !important;
}

.my-tooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: #fff;
  color: #000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.my-tooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
  border-right-color: #fff;
  color: #000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.my-tooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #fff;
  color: #000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.my-tooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #fff;
  color: #000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.my-tooltip {
  background: #fff !important;
  color: rgb(48, 48, 48) !important;
  line-height: 1.5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
>>> .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;
}

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10995.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!