Balloon is appearing in all aria-label tags

[JoelNieto]

I'm using the CDN version and the tooltip isn't working well. It appears in all elements with aria-label tags.
Ironically, it doesn't show with those with data-balloon-pos tags.
This is your css code, why is this?
[aria-label]:not([data-balloon-pos]):before { bottom: 100%; left: 50%; transform: translate(-50%, var(--balloon-move)); transform-origin: top; }

[tonda13]

This is causing problems also with DataTables because they used aria-labels e.g. as sorting arrows.

[silverwind]

A dedicated attribute like data-balloon-text would solve this. It may be possible to use it with the CSS var function to get a fallback to aria-label when absent:

content: var(attr(data-baloon-text), attr(aria-label));

[kazzkiq]

The issue here is that a custom attribute would harm accessibility as discussed in #19.

aria-label is the preferable attribute for this purpose.

@JoelNieto that code snippet you linked has the sole purpose of enabling tooltips even when not using data-balloon-pos so if you want a default tooltip you don't have to type data-balloon-pos="up" everytime. But since this "feature" is leading to all aria-label to show popups, I think we can remove it.

[silverwind]

Ideally, I think the user should be able to choose if they need accessibility (aria-label) or compatibilty (data-baloon-text), so every use case can be covered.

[silverwind]

I do have a working branch with working with a var() fallback, but it just occured to me that it will not solve the issues above because those users might not be in control of other libraries adding aria-label, so wrong tooltips will still show.

Ultimately, it can only be solved by switching to a dedicated data-attribute. Users concerned with accessibilty have to manually add aria-label where appropriate.

[kazzkiq]

Another solution can be forcing the use of data-balloon-pos in order top show the tooltip.

So this would not show a tooltip:

<button aria-label="My Text Here!">No tooltip!</button>

While this would trigger Balloon.css and show the tooltip:

<button aria-label="My Text Here!" data-balloon-pos="up">Yay, tooltip!</button>

This way we prevent all aria-labels elements from triggering unwanted tooltips but also keep the use of aria-label.

[silverwind]

That would be an option yes, assuming the user is in control of all tags that should show tooltips. Would be a breaking change thought, so be sure to bump the major version for this :)

[ingro]

Hello, is there a workaround to this issue? I used balloon.css for a widget and when I integrated it in our site tooltips start appearing all around.

[kazzkiq]

Just pushed v1.0.1 with a fix to this issue.

Now Balloon.css only activates when elements have both aria-label and data-balloon-pos attributes.