Tooltip vs popover

The rule

Ask one question: can someone click something inside it? A tooltip is a label, nothing more, and it vanishes the instant the pointer or focus moves away, which makes anything interactive inside one unreachable before it can be used. A popover stays open until someone dismisses it on purpose, so it can hold a link, a button, or a whole small form. The content decides which one you need, not how it looks floating next to the trigger.

Side by side

GitHub's shortened commit hash uses a tooltip: hover it and the full SHA appears, nothing to click, gone the moment you look away. Notion's date field on a database row is a popover: click it and a calendar opens, staying put while you pick a day, because picking a day is the whole task.

Use a tooltip when

• An icon-only control needs a name and there's no room for a visible label
• A truncated value needs to be readable in full
• A short piece of context helps but isn't required to finish the task

Use a popover when

• The content includes a link, a button, or a field to fill in
• The task is short and tied to one control, like picking a date or a colour
• Losing the rest of the page for a moment costs nothing

Where people get it wrong

The recurring mistake is a link or a button dropped inside a tooltip because, once it's floating next to the trigger, it looks close enough to a popover to reuse the same component. On a mouse it half-works: move toward the link and the tooltip sometimes closes before the click lands, sometimes survives long enough by accident. On a touch screen there's no hover at all, so the tooltip never opens, and the link inside it is unreachable no matter how the desktop version tested.

The other direction happens during implementation, not content: building a popover's focus handling like a modal, trapping Tab inside the panel so it can't escape onto the page. A popover should let Tab walk straight out and onto the rest of the page, which closes the popover the same way a click outside does. Copying the modal's focus trap wholesale is the single most common popover bug, precisely because the two share so much of their positioning code.

A quick way to check: try to click something inside it with a mouse, then try to reach it with Tab alone. If the content disappears before either works, or a touch user could never open it in the first place, it needed to be a popover from the start.