how to change basic html title tooltip background color without adding any extra span?-CodePudding

How to change tooltip background color without adding extra span or div? I have a lot of tooltips across my projects. Is there any way to change bg color of all those by once ?

<!DOCTYPE html>
<html>

<body style="text-align:center;">


<div  title="tooltip text">Hover over me</div>


</body>
</html>

CodePudding user response：

You can't style the title default tooltip with CSS.

You can add a pseudo-element :after the div.

The pseudo-element will be relative to the div, not to the text... so it's not exactly the same. You have to check all the positioning in the pages.

<style>
    div[title]{
        position: relative;
    } 

    div[title]:hover:after{
        content: attr(title);
        background: red; 
        position: absolute;
        left: 50%;
        top: 1em;
    }
</style>

<!DOCTYPE html>
<html>

<body style="text-align:center;">


<div  title="tooltip text">Hover over me</div>


</body>
</html>

And, if you'd like remove the original tooltip, just use a "data-title" attribute instead of the "title" attribute, both in HTML and CSS.

CodePudding user response：

Did you style the background-color for class .tooltip? As you have already created class .tooltip, I think it'd be convenient to just declare its background-color property. It would change the background color for all the elements by once.

Hope it helps!