更改element-ui工具提示的背景颜色

Question

我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。 我有以下 element-ui 组件：

<el-tooltip content="Top center" placement="top">
    <span>Dark</span>
</el-tooltip>

默认情况下，我会得到一个黑色背景的工具提示。

从文档我看到有

effect

属性，其可接受的值为

dark

/

light

。

请问有没有办法改变el-tooltip的背景颜色？

编辑：

尝试过：

<el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip">
    <span>Dark</span>
</el-tooltip>
<style scoped>
  .custom-tooltip {
      background-color: #ffcc00;
      color: #000;
  }
</style>

并得到：

也尝试过（按照示例）：

<el-tooltip content="Top center" placement="top" effect="light" effect="customized">
   <span>Dark</span>
</el-tooltip>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>

并得到：

Answer 1

您可能需要覆盖原始 CSS，例如：

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

<style scoped>
    .custom-tooltip {
        background-color: #ffcc00;
        color: #000;
    }
</style>

Answer 2

只要您知道要选择正确的元素，就始终可以使用 CSS 来实现自定义样式。我使用 Vue 2 和 Element UI v2 创建了一个 codepen 并检查了 DOM 以确定需要应用哪些 CSS。这是我想到的：

<el-tooltip content="Top center" placement="top" effect="customized">
  <el-button>Custom Tooltip</el-button>
</el-tooltip>

/* tooltip body */
.el-tooltip__popper.is-customized {
  background: #50C878;
}

/* tooltip arrow body */
.el-tooltip__popper.is-customized .popper__arrow {
  border-top-color: #50C878;
}

/* tooltip arrow border */
.el-tooltip__popper.is-customized .popper__arrow::after {
  border-top-color: #50C878;
}

上面的代码仅适用于带有

placement="top"

的工具提示。对于其他展示位置，您需要更改

border-{placement}-color

进行匹配。例如：

placement="bottom"

需要改变

border-bottom-color

placement="left"

需要改变

border-left-color

如果您需要自定义多个不同位置的工具提示，则需要为每个工具提示指定一个唯一的

effect

名称，这会更改

.el-tooltip__popper.is-{effectName}

的 CSS 选择器，这样 CSS 就不会发生冲突。