Elementui Tooltip 修改背景色和箭头颜色

首先注意的是修改Tooltip的样式不能写在scoped中，所以我在页面上重新写了一下<style>标签1. css<style>.atooltip {background: #E6F7FF !important;color: #1994FF !important;font-weight: 400;font-size: 12px;border:1px solid #1994

Shelly-L

5421人浏览 · 2022-04-25 10:24:08

Shelly-L · 2022-04-25 10:24:08 发布

首先注意的是修改Tooltip的样式不能写在scoped中，所以我在页面上重新写了一下<style>标签

1. css

<style>
.atooltip {
  background: #E6F7FF !important;
  color: #1994FF !important;
  font-weight: 400;
  font-size: 12px;
  border:  1px solid #1994FF;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0px 8px !important;
}
/* 修改箭头边框 */
.atooltip.el-tooltip__popper.is-dark[x-placement^="left"] .popper__arrow { 
  border-left-color: #1994FF !important;
  top: 4px !important;

}
.atooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  border-left-color: #1994FF !important;
}

/* 修改箭头背景颜色 */
.el-tooltip__popper[x-placement^=left] .popper__arrow{
  border-left-color: #E6F7FF;
}
.el-tooltip__popper[x-placement^=left] .popper__arrow:after {
  border-left-color: #E6F7FF;
}
</style>

注意：

a. x-placement^="left"一定要和你在html中placement="left"的属性一致

b. 默认的样式，默认的有两种effect: dark 和 light,我的代码里面试dark，所以修改箭头边框的时候选择.is-dark

2. html

在el-tooltip上绑定popper-class="atooltip"属性，相当于他的class

<el-tooltip
   effect="dark"
   :content="$t('login.sweep')"
   placement="left"
   popper-class="atooltip"
>
   <div class="login-icon">
        <span class="iconfont yj_QR_code_login" @click.stop="checkoutQRBox" />
   </div>

 </el-tooltip>