1、element-ui tooltip 文字提示 背景修改:
第一步:(先给tooltip设置class:popper-class防止其他部分的样式被覆盖,如下所示;)
<el-tooltip popper-class="tps" enterable content="这是提示内容。"placement="bottom"> <i class="el-icon-warning-outline"></i> </el-tooltip>
第二步:(以下代码根据实际情况,任选一个即可;)
.tps.el-tooltip__popper { background: red; }
// 深色系可以添加一个类 is-dark .tps.el-tooltip__popper.is-dark { background: red; }
// 系可以添加一个类 is-light .tps.el-tooltip__popper.is-light { background: red; }
2、element-ui tooltip 文字提示 三角形颜色修改
说明: .el-tooltip__popper[x-placement^=“方向”] .popper__arrow:after
border-方向-color: red
.el-tooltip__popper[x-placement^=“方向”] .popper__arrow
border-方向-color: red
代码如下:(注意:如果有背景色,请将透明度分开写,如下所示)
.el-tooltip__popper[x-placement^="top"] .popper__arrow:after, .el-tooltip__popper[x-placement^="top"] .popper__arrow { border-top-color: red; opacity: 0.5; }
3、el-table中里面的show-overfloe-tooltip修改样式
<el-table :data="tableData" :max-height="'753'" :tooltip-effect="'tooltipStyle’” //重点 > <el-table-column prop="replacereason" label="更改原因" :show-overflow-tooltip="true" ></el-table-column> </el-table> .is-tooltipStyle { background: #fff; color: #3759af; border: 1px solid rgb(158, 157, 157); font-size: 15px; }