Modifying the background hue of the element-ui tooltip

I am currently working with vue.js version 2.6.10 and element-ui version 2.15.1. The element-ui component I am using is as follows:

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

By default, the tooltip has a black background.

https://i.stack.imgur.com/6gj84.png

After referring to the documentation, I noticed the existence of the effect attribute with accepted values of dark or light.

I am curious if there is a way to customize the background color of el-tooltip?

Edit:

I attempted the following:

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

Resulted in:

https://i.stack.imgur.com/Db0ZD.png

Another attempt (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>

Resulted in:

https://i.stack.imgur.com/zZLIj.png

cssvue.jsvuejs2tooltipelement-ui

Answer №1

To achieve customized styling, CSS can be utilized effectively by targeting specific elements. I demonstrated this in a CodePen using Vue 2 and Element UI v2, where I inspected the DOM to identify the necessary CSS for customization. Here is the code snippet I came up with:

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

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

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

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

The provided code is specifically for tooltips with a placement="top". For other placements, adjustments to border-{placement}-color will be required. For example:

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

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

If customizing multiple tooltips with varying positions, it is advisable to assign unique effect names to each, altering the CSS selector for 

.el-tooltip__popper.is-{effectName}
to avoid conflicts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for concealing dynamically generated div elements within a VueJS v-for loop

Is there a way to hide dynamically generated div elements in VueJS? In my chatbot application, messages are passed through a prop called messages. These message arrays create multiple Divs on the screen displaying information. One particular Div is used to ...

javascriptvue.js

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

htmlcss

Is it possible to incorporate a 960 grid system into a div container?

Can I contain an entire 960 grid within a div on my webpage? I am looking to create a page wider than 960px, and considering placing sidebars outside of the 960 grid while having it manage the central column. ...

htmlcssgrid960.gs

How can I best declare a reactive variable without a value in Vue 3 using TypeScript?

Is there a way to initialize a reactive variable without assigning it a value initially? After trying various methods, I found that using null as the initial value doesn't seem to work: const workspaceReact = reactive(null) // incorrect! Cannot pass n ...

typescriptvue.jsvuejs3vue-composition-api

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

cssangularjsanimationangularjs-ng-repeatng-animate

"Enhanced Laravel application incorporating Vue.js for data manipulation, utilizing Axios for API interactions

Lately, I've been diving into the world of Laravel and Vue.js. However, I've run into a roadblock while working with server-side interactions. After making a post request to the server and getting back a response, I noticed that there is an extra ...

laravelvue.jsaxios

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

javascriptjqueryhtmlcss

Display a pop-up window when hovering over a table cell using HTML and JavaScript

I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...

javascripthtmlcss

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

What is the best way to design a form with two dropdown menus, where the options in the second dropdown menu are determined by the selection made in the first dropdown menu

Is it possible to create two select menus using one dictionary in Django, where the values in the second menu are dependent on the key selected in the first menu? In my Django views.py file, I've constructed a dictionary with Projects as keys and cor ...

jquerypythonhtmlcssdjango

Unresponsive JavaScript on specific element IDs

I'm experimenting with making three lines perform different animations: line 1 rotating 45deg and translating, line 2 becoming opaque, and line 3 rotating -45deg and translating. Check out my JS Fiddle here <a href="#"><div id="menu" onclic ...

javascripthtmlcss

Rails: How come my personalized stylesheet isn't taking priority over the font family?

I have included the Skeleton boilerplate css in my application from this source. It can be found within the directory app/assets/stylesheets. app/assets/stylesheets ├── application.css ├── custom.scss ├── normalize.css └── skeleton ...

cssruby-on-railssasssprockets

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

javascriptjqueryhtmlcss

Looking for a new perspective to troubleshoot VUE props that are malfunctioning

In the realm of VUE.JS lies a strange task that has eluded me. Within a sub parent component, there exists: <teamPlayers :teamId="team.id_team"></teamPlayers> The teamId value is passed to the child component and displays properly in the tem ...

vue.js

vue-chartjs is experiencing difficulties when it comes to showing the labels and datasets

I'm having an issue with my line-chart. The data from the api/controller isn't showing up on the chart, even though the response contains all the data. https://i.stack.imgur.com/PWZxZ.png As shown in the image, the line-chart is empty but the r ...

vue.jschart.jsaxiosvue-chartjs

Vue.js - sortable table with search functionality and image display

A Vue.js component/view I created displays data in the following format: <tbody v-for="item in items"> <tr> <td width="15%"><img :src="item.image"></td> <td width="50%">{{item.name}}</td> <td>{{item.purc ...

vue.jsvuejs2vue-component

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

What is the Best Way to Create a Smooth Border-Bottom Transition?

I'm currently diving into the world of HTML5 and CSS. I want to replicate the layout from . Specifically, I am interested in adding a transition effect to the border bottom of certain elements such as "View Our Listings", "The Agency Daily", "Meet our ...

htmlcss

What are the steps to include a string into Vue and then assess its value?

Where should I define a function in a SPA using the options API that will be called from an HTML href? Check out this demo on Codepen where everything works fine: CODEPEN However, when I try to implement it in my single-page application: <templat ...

javascriptvue.jsvuejs3quasar-framework