cssvue.jsvuejs2tooltipelement-ui

Changing the background color of element-ui tooltip

I'm using vue.js 2.6.10 and element-ui 2.15.1. I have the following element-ui component:

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

And as default I'm getting a tooltip with black background.

enter image description here

From the documentation I see there is the effect attribute with the accepted values of dark/light.

I wonder if there is a way to change the background color of el-tooltip?

Edit:

Tried:

<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>

And got:

enter image description here

Also Tried (following the example):

<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>

And got:

enter image description here

Solution

  • Custom styling can always be achieved with CSS as long as you know the right elements to select. I created a codepen with Vue 2 and Element UI v2 and inspected the DOM to determine exactly what CSS needs to be applied. Here is what I came up with:

    <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;
}

    The code above will only work with tooltips with placement="top". For other placements you need to change border-{placement}-color to match. For example:

    placement="bottom" requires changing border-bottom-color

    placement="left" requires changing border-left-color

    If you need to customize multiple different positioned tooltips, you will want to give each a unique effect name, which changes the CSS selector for .el-tooltip__popper.is-{effectName}, so then the CSS won't clash.