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

How to remove tooltip after clicking on the button? #135

Closed emaillenin closed 4 years ago

emaillenin commented 4 years ago

The tooltip doesn't automatically disappear after the button is clicked:

tooltip-bug

Can be reproduced on https://kazzkiq.github.io/balloon.css/ too.

I could reproduce this only with Chrome 80.0.3987.149 on Mac OS 10.14.6.

Works fine with other browsers in the same OS.

kazzkiq commented 4 years ago

This is because by default Balloon.css also triggers on :focus states. Sometimes after you click a button, it remais focused.

To prevent this behavior you can use the data-balloon-nofocus attribute. E.g.:

<!-- Will NOT appear on focus -->
<button aria-label="Hey!" data-balloon-pos="up" data-balloon-nofocus></button>
locness3 commented 4 years ago

If you use nofocusthough, it won't appear when navigating with keyboard.