I currently have some external CSS code obtained from W3Schools:
/* Tooltip container */
.tooltip {
/*position: relative;*/
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 20;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
span:hover .tooltiptext {
display:none;
}
This code is intended to affect the following block of HTML:
<div class="CELL_INFO tooltip">
<span class="tooltiptext">
Square resources: '.$WOOD.' wood, '.$IRON_ORE.' iron ore, '.$STONE.' stone.
</span>
</div>';
The goal here is to display a tooltip contained within the <span class="tooltiptext"> only when hovering over the <div class="CELL_IFNO">. Additionally, when hovering over the tooltip span itself or leaving the containing div, it should disappear. The idea behind this setup is to ensure that the tooltip remains hidden once the cursor is no longer over the main div.
In essence, I am attempting to have the tooltip appear ONLY when the parent div is being hovered over and not when directly interacting with the child tooltip span.
Unfortunately, my current implementation is not functioning as desired and I am unsure how to achieve this using purely CSS. Can someone provide insight into what might be causing this issue?
NOTE:
When applying the display: none; property globally to the span element, it works, but I specifically need it to apply only to spans with the "tooltiptext" class.