CODEWITHSUNDEEP
htmlcss
peterHasemann
peterHasemann

Reputation: 1590

prevent hover effect on a tooltip container

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?

Upvotes: 2

Views: 1068

Answers (2)

vaishali kapadia
vaishali kapadia

Reputation: 934

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>

Upvotes: 2

Pete
Pete

Reputation: 58462

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>

Upvotes: 2

Related Questions