如何修改Element-UI Tooltip组件的背景颜色？

你的两种尝试失败原因 #

• 方法1失败：scoped样式无法穿透到挂载在body上的Tooltip弹出层，且样式仅作用于<el-tooltip>元素本身，而非实际的弹出容器.el-tooltip__popper。
• 方法2失败：Element-UI 2.x仅支持dark/light两种effect值，Element Plus的自定义effect逻辑不适用于旧版Element-UI，且两者弹出层的类名不同（Element-UI是.el-tooltip__popper，Element Plus是.el-popper）。

方案1：全局统一修改所有Tooltip样式 #

在全局样式文件（如App.vue的非scoped样式、独立CSS文件）中添加以下代码，根据使用的effect主题修改：

/* 修改dark主题Tooltip的背景色与文字色 */
.el-tooltip__popper.is-dark {
  background-color: #ffcc00;
  color: #000;
  border: none; /* 可选：移除默认边框 */
}
/* 同步修改dark主题Tooltip的箭头颜色 */
.el-tooltip__popper.is-dark .popper__arrow::after {
  border-top-color: #ffcc00; /* 根据placement调整：top用border-top，bottom用border-bottom，left用border-left，right用border-right */
}

/* 如果使用light主题，替换为.is-light */
.el-tooltip__popper.is-light {
  background-color: #ffcc00;
  color: #000;
}
.el-tooltip__popper.is-light .popper__arrow::after {
  border-top-color: #ffcc00;
}

方案2：局部自定义单个Tooltip样式 #

如果仅需修改某一个Tooltip的样式，可选择以下两种方式：

方式A：使用深度选择器（支持scoped样式） #

给Tooltip添加自定义类，通过::v-deep（或/deep/）穿透scoped限制：

<el-tooltip content="Top center" placement="top" effect="dark" class="custom-tooltip">
  <span>Dark</span>
</el-tooltip>

<style scoped>
/* 穿透scoped定位到body上的弹出层 */
::v-deep .custom-tooltip .el-tooltip__popper.is-dark {
  background-color: #ffcc00;
  color: #000;
}
/* 同步修改箭头颜色 */
::v-deep .custom-tooltip .el-tooltip__popper.is-dark .popper__arrow::after {
  border-top-color: #ffcc00;
}
</style>

方式B：使用非scoped样式 #

将自定义样式放在无scoped的<style>标签中，通过自定义类精准定位：

<el-tooltip content="Top center" placement="top" effect="dark" class="custom-tooltip">
  <span>Dark</span>
</el-tooltip>

<style>
.custom-tooltip .el-tooltip__popper.is-dark {
  background-color: #ffcc00;
  color: #000;
}
.custom-tooltip .el-tooltip__popper.is-dark .popper__arrow::after {
  border-top-color: #ffcc00;
}
</style>

注意事项 #

• 箭头的border-*-color需根据Tooltip的placement属性调整：比如placement="bottom"时，要修改border-bottom-color；placement="left"对应border-left-color，placement="right"对应border-right-color。

内容的提问来源于stack exchange，提问作者KaliTheGreat