CODEWITHSUNDEEP
htmlcss
Adam Bajger
Adam Bajger

Reputation: 561

How to make the CSS tooltip box disappear after hovering over it?

I have some external CSS 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;
}

Which should apply some rules for the folowing block of html:

<div class="CELL_INFO tooltip">
    <span class="tooltiptext">
        Square resources: '.$WOOD.' wood, '.$IRON_ORE.' iron ore, '.$STONE.' stone.
    </span>
</div>';

There you should be able to display tooltip contained in the <span class="tooltiptext"> by hovering over the <div class="CELL_IFNO"> and then, if you hover over that tooltip span itself (or when the cursor leaves the containing div), it should disappear. And because you are not hovering over that div anymore, the tooltip should stay hidden.

Basicly what I ma trying to achieve is that I have tooltip, which is shown ONLY when you are hovering the parent div, not the child tooltip span itself.

My example is not working and I have no idea how to do it by pure CSS. Can someone explain, what is goin on?

NOTE: When the display: none; property is bound to span in global, it works, but i need it to work only for spans with the "tooltiptext" class.

Upvotes: 1

Views: 2832

Answers (2)

Nathan
Nathan

Reputation: 565

Your last rule says that you want to select a .tooltiptext element contained within a span. What it sounds like you meant to do is select a span that has the .tooltip class. try this:

span.tooltiptext:hover {
    display: none;
}

or simply,

.tooltiptext:hover {
    display: none;
}

Upvotes: 1

airos
airos

Reputation: 752

You need to remove the space in your selector

Try span:hover.tooltiptext instead of span:hover .tooltiptext

With the space in between, it selects elements with class .tooltiptext which are inside span:hover elements.

Upvotes: 1

Related Questions