vue el-tooltip 修改默认样式

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;
}复制