A tooltip must not contain interactive elements
Aliases: tooltip link · clickable tooltip · buttons in tooltip
What it is
A tooltip is a short read-only string that appears on hover or focus and goes away on leave. Put a link, a button, or a field inside it and it is no longer a tooltip; it is a miniature dialog that was not built by popover rules. Non-interactive tooltip forbids putting clickable objects on this short-lived surface: the layer often closes before the pointer can enter it; if the pointer does enter, leaving the trigger may close it anyway. Interaction needs a surface willing to stay.
Why it happens
A tooltip’s lifetime is bound to the pointer’s relation to the trigger: enter shows, leave hides, with a gap between them. An interactive element requires the pointer to travel from the trigger onto a link in the layer, and that path crosses the gap. If “leave” fires on the gap, the layer vanishes and the click hits the page below. To make the path possible, implementations add delayed close or an invisible bridge, and the tooltip starts to live like a popover without a popover’s focus, dismiss, and size. Keyboard is worse: if the tooltip appears on focus, Tab into the in-layer link moves focus off the trigger, the tooltip should close by its own rule, and the link is never activated. The result is a middle state that is neither tooltip nor popover, and neither channel’s expectations apply. “Learn more” that must be a link belongs in persistent help, a help page, or a real popover.
Studying it
Put a link in a tooltip and measure success at moving from trigger to link and activating, mid-path disappearances, and clicks that punch through to the layer below. A keyboard group tests whether Tab into the link closes the layer. Independent variables: close delay, pointer bridge, link placement. Dependent variables: activation success, punch-through clicks. Even a long delay should not be taken as evidence that tooltips may hold links — that is a popover patch on a tooltip.
Where it stops holding
Read-only formatting inside a rich tooltip (bold, line breaks) is not interaction. A tooltip that is a single unclickable image is still read-only. If the product insists on a form in a hover layer, open a popover on click and handle focus and dismiss as a popover. Screen readers speak name and description as properties and do not need an in-layer link; copy that says “click to learn more” with nowhere to click is lying.
Applying it
- Text only inside a tooltip. If an action is required, use a popover or in-page help; do not make a link in the tooltip.
- Do not lengthen close delay to “support” a pointer trip into the layer.
- Make help a real button or link on a surface that stays.
- How to check: when the tooltip is showing, move the pointer toward anything that looks clickable. If the layer closes before arrival, or the click hits the page below, interaction is still being stuffed into a tooltip.