chinchang / hint.css

A CSS only tooltip library for your lovely websites.

Home Page:https://kushagra.dev/lab/hint/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hints on buttons get stuck in open state after a click

varemenos opened this issue · comments

Here is an example of what I mean: http://codepen.io/adonisk/pen/eKAIF
You can also see it at http://codemagic.gr , pressing the buttons on the topbar (HTML, CSS, JS, Console etc) will reproduce the issue.

tested it in Chrome v32, Firefox Nightly 28.0a1 and Epiphany (latest)

This happens because Hint tooltips show on :focus state also. And after clicking the focus remains on the button. To avoid this, you'll have to modify the library at your end slightly. Simply remove all the :focus CSS selectors from the library. For eg. .hint--right:focus:before.

Shouldn't this be considered a bug?

Why isn't this fixed? Is it intended behaviour?

@mazing yes, on focus tooltips are required for accessibility as when someone reaches an element pressing tab, he should see tooltip on it.

I see :-)

But will the only solution be to tweak the entire code manually, making it, for instance, impossible to load the package through bower etc. if you want the tooltip to hide after clicking a link or button?

I will look into some solution for this. Appreciate any suggestions.

Wouldn't it just be to create the same css classes named hint--hover or something else without the :focus selector?

@mazing If you still need it I can send you a modified css with the before and after focuses set to hide the arrow and tooltip. =)

This has been fixed in v2.0