首先注意的是修改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>