CSS Tooltip will not work on WordPress page

Question

I'm following the very easy and clear instructions on the CSS Tutorial page: https://www.w3schools.com/css/css_tooltip.asp

The CSS classes were entered in the stylesheet for the site:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Even for the very basic first option, nothing shows for text in the inline container, e.g. nothing shows after the first line below:

<p>Move the mouse over the text below:</p>    
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

I've tried this using two different WordPress sites, one with Avada Theme and another with Beaver Builder Theme. Same thing happens with both. I'm pretty sure I'm not doing anything wrong. And this is basic CSS.

Thanks for any help.

---

Sorry, I thought the class would be obvious from the reference to the CSS Tutorial page. Edited to included the classes above.

Answer 1

just change your class names from tooltip to something else... Like:

.tooltip123 {
    position: relative;
    display: inline-block;

}

.tooltip123 .tooltiptext123 {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 99999;
}

.tooltip123:hover .tooltiptext123 {
    visibility: visible;
}

This will work I.A..

Answer 2

If it works in a plain html page but doesn't work in Wordpress, then you have a clash with the rest of the Wordpress code & styles, and that's a lot of external factors to consider. This is where you develop your debugging skills :-)

The 2 most obvious possibilities (to me anyway) are:

1. z-index is too low

Your tooltip could be hidden by elements with a higher z-index. This in my opinion is the most likely scenario.

How to debug this: Change your z-index to something really high e.g. 99999 to make sure it will appear on top of everything else

If this is the issue, you should still reduce the z-index to a number that is just enough to make it show on top.

2. You have a plugin or theme using the same classnames as your code

This would mean that any styling applied to their tooltip and tooltiptext classes could also affect yours. e.g. they could be hiding the tooltip off screen using absolute positioning of -99999px

How to debug this: Change the name of your classes to something unique. For debugging, use something random so you're sure it won't be used by anything else, e.g. Rgrt4522dFE3dd.

Whether this is the issue or not, you should rename them to something less generic such as prefixing all names with a unique reference. It's a good idea to get in the habit of using unique names for classes and anything else global, to prevent clashes happening.