Hidden hint has outline when going through links on a page using a tab key

[dvorapa]

The hint is outlined even when it is hidden. See screenshot below

[chinchang]

This behavior is because after/before pseudo elements (used by Hint.css for tooltips) are part of the actual element itself and therefore become part of its outline too.
While I am looking for a solution to prevent this somehow, you can for now try removing the outline all together if its not too critical for you:

a { outline: 0; }

EDIT: THIS IS NOT AT ALL RECOMMENDED. Because outline makes it usable for keyboard users.

[dvorapa]

It is just a little design bug, not so important. I do not want to remove it because of handicapped people, who could go through using tab key and want to see, what link they are on. Better to have special shape than nothing for these users

[tnguyen14]

I'm curious about whether this can be fixed somehow as well. And I agree with @dvorapa that the outline shouldn't be hidden for accessibility reason.

[iainsimmons]

Another option would be to show the hint/tooltip on focus (and maybe active) states in addition to just hovering. That way, the outline would at least be shown around a readable tooltip. Much better experience for keyboard users, and if using the ARIA labels, I think it wouldn't change much for screen reader users (though I thought I read somewhere that some assistive technology reads out pseudo-content...)

[chinchang]

@iainsimmons Focus support was removed due to #63

[iainsimmons]

@chinchang Having a button that is still focused when clicked isn't an issue in my eyes, as it's technically correct. If you want the hint to disappear you should move the focus to another, relevant element while handling the click event for the button.

[Aymkdn]

Any solution for this 3-years-old issue ?

[chinchang]

Re-visiting this issue and all the discussion here and on issue #63, I feel removing the focus support was not a good idea. It has broken the keyboard accessibility just for the sake of preventing the tooltip from showing even after a button/link is clicked.

I would vote for getting the tooltip back on focus.
What say people?

[Aymkdn]

My current workaround is to force a blur() on the a/button once the user has clicked on it :

<button type="button" class="hint--top" aria-label="some text" onclick="doSomething(); this.blur()">awesome action</button>

[iainsimmons]

My current workaround is to force a blur() on the a/button once the user has clicked on it :

<button type="button" class="hint--top" aria-label="some text" onclick="doSomething(); this.blur()">awesome action</button>

Yes, this can only really be done with JavaScript, since the 'correct' behaviour is to leave a button focused after it is clicked, until you focus on something else.