prevent hover effect on a tooltip container

Question

I created a tooltip file

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div> 

It works really fine but when hovering over the tooltips position, the hover effect triggers too. The hover effect should just get triggered when hovering over the element the tooltip is attached to.

How can I make the tooltip only appear when hovering the element?

Answer 1

You can remove the pointer-events from the tooltip:

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; pointer-events: none; /* add this */ } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div> 

Answer 2

Add pointer-events: none; to tooltip class.

It disables mouse events (clicking, dragging, hovering, etc.) on elements.

Hope this helps :)

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; pointer-events:none; } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div>