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

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

javascriptphphtmlcss

Is Vue function only operating after editing and refreshing?

I'm facing an unusual issue in my Vue function where it only seems to work after causing an error intentionally and then refreshing the page. The code itself works fine, but there's a problem with the initialization process. Can someone provide s ...

javascriptfunctionvue.jsvuejs2onclick

Implementing secure Laravel storage with Videojs and Vue.js

I am encountering an issue with accessing privately stored videos from my server using laravel, videojs, and vuejs. Below is the code snippet of my controller method: public function fetchPrivateVideo($video) { $video_path = '/private/courses/e ...

laravelvue.jssingle-page-applicationvideo.jslaravel-storage

Eliminating bottom section in HTML/CSS

I've got this code snippet: new WOW().init(); /* AUTHOR LINK */ $('.about-me-img img, .authorWindowWrapper').hover(function() { $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('tr ...

javascripthtmlcssanimation

The background-size property in CSS does not seem to properly display on iPhones

Hello there! I'm facing an issue with my CSS code when it comes to displaying the image on Safari browser. It works perfectly fine on other browsers, but for some reason on Safari, the image doesn't show up correctly. I tried using a media query ...

htmlcsssafari

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I add a Mouse Scroll Click (Middle Button) event in ASP.NET and C#? I have already looked into the MouseWheel Event, but it did not provide the solution I was looking for. This is the order in which mouse events occur: MouseEnter MouseMo ...

c#asp.netcsseventsmouseevent

CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

I have a set of radio buttons arranged like this: I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this: However, the current setup uses a min-width media query for layout breaking, which can lead to text ...

htmlcssflexbox

Styling with CSS based on the remaining width of the viewport relative to the height

If you're viewing this on a tablet browser, the dimensions are set relative to the viewport width and height. Let's assume a landscape orientation for simplicity. Inside a fullscreen container, there are two divs positioned absolutely, just like ...

htmlcsscss-positionviewport

What is the best way to align text in the middle on smaller devices like phones and iPads?

I have been working on a login screen and encountered a problem with the layout on smaller devices. Despite centering all the content perfectly on my computer's browser, when I inspect it using developer tools for smaller devices, everything shifts to ...

htmlcssreactjsbootstrap-4bootstrap-5

Build a custom form for the purpose of exporting an HTML file

I am in search of a way to provide my users with various "feature" choices that will assist them in creating an HTML file for an email. I already have the code ready for each feature, but I want users to be able to select a feature (such as Hero Image Head ...

javascriptcsshtmlhtml-email

Advancing in the Mozilla fashion

Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...

htmlcss

A guide on successfully implementing Nuxt-img on nuxt3 generate!

I've been experimenting with nuxt-image on NUXT3, but I've run into an issue when using the generate command. While images display correctly during development, they return a 404 error when using nuxt generate. In my nuxt config, I have: modules ...

vue.jsnuxt.jsvuejs3nuxtjs3static-site-generation

A guide to verifying a user's age using JavaScript by collecting information from 3 separate input fields

On page load, only the year input is required for users to fill in. The user can enter their birth year first without providing the month and day. Currently, I have a function that checks if a person is over 16 years old by comparing their birth year with ...

javascriptvue.jsecmascript-6ecmascript-5

Is there a way to incorporate vue samples into an independent HTML document?

Striving to broaden my knowledge of Vue, I set out to create a page with tabs inspired by one of the Vue examples available at . However, an obvious error seems to be eluding me, as I encounter a syntax issue on the line import * as Tabs from 'vue-s ...

javascriptvue.js

Utilize the data variable to dynamically generate components within the template

I have various components that share the same props. I'm looking for a solution to efficiently use these components within my template without having to resort to multiple if-else statements. To address this, I've created an object in my data whe ...

vue.js

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

javascriptc#htmlcssasp.net-core

What is the best way to integrate a VueJS application into an already established web page?

Working on a project involves fixing issues with legacy components in a server-rendered web page. I proposed rewriting these parts in Vue to facilitate our migration, and the team approved. I created a mini-app using the Webpack template from Vue CLI, whi ...

javascriptvue.jsvuejs2

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance. Currently, my navbar is located below the image but not within it like this: I am looking to achieve so ...

htmlcssangularjsbootstrap-4

Leveraging the combination of Express JS and Vue.js within the Electron framework

Can you combine Vue.js and Express JS in a project with Electron JS? How would this work? I currently have a project running on Vue.js and Electron JS, but I'm unsure how to integrate Express JS into it. Any guidance would be greatly appreciated. ...

expressvue.jselectron

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js