search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

Exclude Selector #134

Closed Aniruddh-J closed 4 years ago

Aniruddh-J commented 4 years ago

Hello,

Thanks for the awesome tooltip.

Is it possible to add an exclusion selector so that hovering over the excluded selector doesn't trigger the tooltip?

kazzkiq commented 4 years ago

Balloon.css only triggers when using both aria-label and data-balloon-pos together. I can't actually see a reason to prevent those two attributes from triggering a tooltip, since you could simply remove one of them to prevent it triggering.

That being said, you could make your own CSS to achieve that behavior:

.exclude[aria-label][data-balloon-pos]:before,
.exclude[aria-label][data-balloon-pos]:after {
  display: none !important;
}

So now whenever you use the class exclude your element won't show the tooltip.

Example: https://jsfiddle.net/b2g6kze1/

Aniruddh-J commented 4 years ago

@kazzkiq Actually, I did exactly that except, I did opacity: 0 which did the trick for me.

The reason I had to do this is because parent of the element has a tooltip and child also has one. Hovering over the child also triggers parent tooltip and I wanted to avoid that.

So, I added CSS:

.notip[aria-label][data-balloon-pos]:before,
.notip[aria-label][data-balloon-pos]:after {
    opacity: 0 !important;
}

and using jQuery I added notip on parent when mouse is hovered over child. :)