use UI

Popover vs Tooltip

These look alike and behave nothing alike. A tooltip appears on hover or focus, holds text, and never takes focus — which means the pointer can never reach inside it. A popover opens on a deliberate click, takes focus, and holds controls you can actually use. The test is not how much content there is; it is whether any of it needs to be clicked. A link inside a tooltip is unreachable, and that is not a styling problem, it is the wrong element.

If anything inside needs to be clicked or typed into, it is a popover. If it is text the user only reads, it is a tooltip.

Popover

A layer anchored to a trigger, opened deliberately by click, that can contain interactive content.

Reach for it when

  • A handful of controls belong to one specific element — a colour picker, a date picker, a set of filters for one column.
  • Extra detail with an action attached: a definition plus a link, a summary plus a button.
  • The content is genuinely optional and the user should be able to open it when they want it, not have it pushed at them.
  • The panel needs to stay visually tied to its trigger, so a modal in the middle of the screen would break the connection.

Avoid it when

  • It is plain text with nothing to click. That is a tooltip, and a popover makes the user work for it.
  • There is a lot of content or it needs scrolling. Use a drawer, or a page.
  • The decision is blocking or destructive — a popover is too easy to dismiss by clicking away.
  • You want it to open on hover. Hover-opened panels with buttons inside are a well-known trap: the pointer has to cross a gap to reach them and they vanish on the way.
  • It would open from inside another popover. Anchored layers stacked on anchored layers lose their anchor.

Tooltip

A small text-only label that appears on hover or keyboard focus and describes the element it is attached to.

Reach for it when

  • Naming an icon-only button. This is the tooltip's core job and it does it better than anything else.
  • Expanding an abbreviation or a piece of jargon the interface cannot spell out in full.
  • Showing the complete value of text that had to be truncated.
  • Adding a detail that is genuinely optional — the interface must still make sense to someone who never sees it.

Avoid it when

  • The content is the only place that information exists. Tooltips are invisible on touch devices and to anyone who does not hover.
  • There is anything interactive inside — a link, a button, a copy action. A tooltip cannot be reached to click.
  • It is more than a short sentence. Long tooltips get cut off by the viewport and are exhausting to read while holding a hover.
  • Something has gone wrong. Errors belong in the layout, not in a layer that disappears when the mouse moves.
  • Attaching one to a plain block of text. Nobody hovers over paragraphs, so it will simply never be discovered.