美文网首页收藏
如何修改el-tooltip弹出窗的背景颜色和箭头颜色

如何修改el-tooltip弹出窗的背景颜色和箭头颜色

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-02-01 17:19 被阅读0次

重点

利用popper-class为el-tooltip绑定class类名直接通class绑定无效

<el-tooltip
        popper-class="packageDownLoad-tooltip"
        effect="light"
        placement="right"
      >
        <div slot="content"><package-form></package-form></div>
        <el-avatar
          @click.prevent.native="packageDown"
          shape="circle"
          size="large"
          src="/img/bg/top/packDown.png"
        ></el-avatar>
      </el-tooltip>

css中

!important一定要加

/* 设置背景色 */
.packageDownLoad-tooltip {
  background-color: blue !important;
}
/* 设置箭头颜色 */
.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: red !important;
}

效果

image.png

相关文章

网友评论

    本文标题:如何修改el-tooltip弹出窗的背景颜色和箭头颜色

    本文链接:https://www.haomeiwen.com/subject/svbihdtx.html