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

Using `aria-label` can break compatibility with 3rd party code #123

Closed joankaradimov closed 5 years ago

joankaradimov commented 5 years ago

One example is dhtmlxGantt. A sample of its usage of aria-label can be seen here.

Overriding the default style for aria-label potentially makes any 3rd party library that does higher-level rendering incompatible with balloon.css.

kazzkiq commented 5 years ago

Balloon.css only "activates" when using both aria-label and data-balloon-pos attributes. If an element has only aria-label it is not impacted.

This behavior solves the issue, no?

boris-petrov commented 5 years ago

@kazzkiq - well, for example, you can see in the source here that you actually modify [aria-label] globally. And it's really easy to check. Open the example in the first post - see how it looks. Then, in it's source, modify the three relative URLs in the beginning to be absolute and then just add the CSS from balloon.css and check the result.

I've created a repository here to showcase it. Just download the file and open it in a browser. See how everything is shifted due to conflicting CSS.

kazzkiq commented 5 years ago

You're totally right. We still have properties being assigned to every [aria-label] element.

kazzkiq commented 5 years ago

v1.0.2 fixes this issue.