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

Animation for tooltips that have `data-balloon-visible` #136

Open ghost opened 4 years ago

ghost commented 4 years ago

In one of my recents projects I used data-balloon-visible attribute through javascript for alert the user if there is any kinda of error on the form's inputs. I noticed that when the tooltip appear, there isn't any animation at all.

Step to reproduce:

Simply try to use a balloon tooltip with an data-baloon-visible setted through javascript.

Expected Behavior

The tooltip came up with an animation

Real Behavior

There isn't any animation at all

locness3 commented 4 years ago

I can't reproduce, are you sure you're not using the data-balloon-bluntattribute?

ghost commented 4 years ago

Ok, I did some research and testing, link here. We have the problem only when we set the aria-label through js, otherwise all work fine.

locness3 commented 4 years ago

If you wanna contribute, I think you should look here.

ghost commented 4 years ago

here were the tooltip blow up? https://github.com/kazzkiq/balloon.css/blob/f30698391242ba4ca8848de1c924903664e55212/src/balloon.scss#L113

Also, if you are interested I did some other tests (link here), if you set the data-balloon-visible after aria-label all work well. Interesting behavior.

locness3 commented 4 years ago

Yes, it's this part of the code that makes the tooltip show up. This behaviour is justified because it's the addition of the data-balloon-visible attribute that triggers the animation, that's the part of the code I pointed at.