Overlays & feedback

Tooltip / Popover

Q: How do people describe a Tooltip / Popover in plain words?

the little label that shows up when I hover an icon that small bubble explaining what a button does a floating tip next to something without opening a whole dialog

Q: How do I implement a Tooltip / Popover?

Add a tooltip on the icon button: show on hover and keyboard focus, hide on blur/Esc, keep copy under ~60 characters, use role="tooltip" with aria-describedby, and flip placement if it would overflow the viewport.

A small floating tip (tooltip) or richer bubble (popover) anchored to a control.

Also known as hint · hover tip · floating bubble · callout

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tooltip / Popover".

Add a tooltip on the icon button: show on hover and keyboard focus, hide on blur/Esc, keep copy under ~60 characters, use role="tooltip" with aria-describedby, and flip placement if it would overflow the viewport.

Anatomy:
- trigger: The control that shows the tip on hover, focus, or press.
- content: Short text for tooltips; popovers may hold links or light actions.
- arrow: Optional pointer toward the trigger; skip if it fights dense UIs.

Preferred API / pattern: `shadcn Tooltip / Popover (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Tooltip is the only label for an icon button
○Avoid: Popover traps focus incorrectly or steals hover from nested menus.
○Avoid: Native title attribute alone
○Avoid: Huge form stuffed into a popover

In plain wordsHow people search for it

“the little label that shows up when I hover an icon”“that small bubble explaining what a button does”“a floating tip next to something without opening a whole dialog”

AnatomyOpen for part names

trigger: The control that shows the tip on hover, focus, or press.
content: Short text for tooltips; popovers may hold links or light actions.
arrow: Optional pointer toward the trigger; skip if it fights dense UIs.

How to write itOpen for stack patterns

Web (HTML/CSS)title attr (weak) / role="tooltip" + positioning

React + Tailwind + shadcn/uishadcn Tooltip / Popover (Radix)

SwiftUI.help / popover(isPresented:)

Ant Design<Tooltip> / <Popover>

Notes

Tooltips are for short, non-essential help—never the only way to understand a control. Popovers can hold light interaction but not multi-step forms. Prefer focus+hover open, Esc close, and collision-aware positioning so tips don't leave the viewport.

Help me choose: Tooltip / Popover vs Modal →

Common mistakesHumans and models trip here

Tooltip is the only label for an icon button: add an accessible name first.
Popover traps focus incorrectly or steals hover from nested menus.
Native title attribute alone: slow to appear and bad for touch users.
Huge form stuffed into a popover: use a modal or drawer instead.

More failure symptoms on AI broke it.

Related patterns

Dropdown MenuA compact menu of actions or options revealed from a trigger control.Modal DialogA centered window that blocks the page until the user responds.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X