Your Tooltips Are Bogus

Tooltips are implemented all over the place. Badly. Let me count the ways.

It's attached to a non-interactive element

It's not a tooltip if there's no tool (control, button, whatever). What you're really doing is just hiding content away. Why?

It's attached to a non-interactive element that's focusable

So, at some point, you realize that your faux-tooltip (see above) only works on hover, meaning keyboard users don't have access to it. Accordingly, you add tabindex="0" to it or turn it into a <button>.

You've played yourself. Non-interactive elements (elements that do nothing when you click them) should not be focusable, as per Focus Order, 2.4.3.

Even if you consider the showing of the tooltip an interactive 'action', it happening on focus makes little sense, especially to unsighted screen reader users who won't know anything has happened.

It doesn't work by touch

Your tooltip is a tip for an actual tool: good. But it doesn't work by touch because tapping the tool/button/whatever activates it. If the user's lucky, they may see the tooltip briefly before the button's action takes place. By then, it's too late.

Yes, this means that most tooltips are just not viable components in 2018. Solve the problem differently.

It does nothing for AT users

Okay, you've decided to make the tooltip click-activated because that works by touch. Of course, now the button can only show a tooltip and do nothing else. Not a problem, if that's all it's for.

But! You've also used aria-labelledby or aria-describedby so that screen reader users have access to the tooltip message from the button. Great, but now clicking the button doesn't actually do anything as far as they can tell.

The tooltip contains interactive content

You're thinking of dialogs. Use a dialog.

You probably don't need to use a tooltip, but if you do I wrote this to help you go about it in an accessible way.