Exclude Selector

[Aniruddh Joshi]

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?

[Claudio Holanda Jr.]

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 Joshi]

@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. :)