Tooltips on actionable controls - problems with links and in general touch devices

Currently, tooltips have a series of issues:

• if added to a link, it seems that the tooltip swallows any further attempt to actually trigger the link (even when using a mouse or keyboard)
• using a touchscreen, conceptually the tooltip is triggered when the trigger element receives focus; however, if on an interactive element like a button (and link, but that’s currently broken in all cases as per the above point), tapping the trigger will already trigger whatever action is associated with it (taking the buttons with tooltips as example, tapping a button will trigger whatever the click behavior associated with it is, and only then show the tooltip)

Ideally, the way tooltips on interactive controls should work:

• for mouse/keyboard, show the tooltips on focus/hover but then do not prevent the default action (not dug into the code, but likely a preventDefault somewhere is the culprit)
• for touchscreen/stylus interactions, keep track of whether or not the tooltip is visible; if not, on first tap/focus show tooltip then preventDefault. if tooltip IS visible, don’t preventDefault and allow the control to just carry out its normal function (and possibly close the tooltip). this way interactive controls with tooltip get a “two-step” process: first tap to show tooltip, second tap to actually trigger their functionality

[patrickhlauke]

ah, thanks for checking. you’re right, some changes to the code since i filed this must have addressed this. good catch.

[tyricec]

I’ve created this codepen, and I seem to be able to click the link and it navigates. Is there something I’m missing in this example?

https://codepen.io/tyricec/pen/VrpBGx