USER INTERFACE

Tooltips & Popovers

Tiny hints on hover and focus, and small panels anchored to what you clicked.
THEME
01

Tooltip · Playground

Placement, style, delays — drag the button to the edge
Placement top · center — drag to an edge
<Tooltip content="Share this project" side="top" align="center" avoidCollisions variant="dark" arrow delay={300} closeDelay={0} > <Button>Share</Button> </Tooltip>
Tooltip
PLACEMENT
STYLE · CONTENT
SHOW AFTER · HIDE AFTER
02

Tooltips in context

Toolbars, truncation, charts, avatars, disabled, field help
Icon buttonslabel + shortcut · warm-up
Hover one, then slide along — the next shows instantly.
Truncated textonly when cut off
hero.jpgmyvatn_hero_04_final_retouched_v3.jpgbrief.pdfnordic_thread_spring27_lookbook_print_ready.pdfbts.mp4
Only the cut-off names get a tooltip.
Chartfollows the bar
MonTueWedThuFriSatSun
Avatarsname · role · +3
Name and role on hover; +3 lists the rest.
Disabled actionexplain why
Disabled buttons swallow hover — wrap them so the reason still shows.
Info iconfield help · click or hover
VAT ID
03

Popover · Playground

Trigger, placement, width, dismissal and focus
Popover opens on click
<Popover trigger="click" side="bottom" align="start" width="M" closeOnOutsideClick={true} closeOnEsc={true} showClose autoFocus > <Popover.Trigger><Button>Share</Button></Popover.Trigger> <Popover.Content>…</Popover.Content> </Popover>
Popover
OPEN ON
SIDE · ALIGN
WIDTH
04

Popovers in context

People, quick edit, dates, colours, filters, coach marks
Person cardhover · stays when you move in
Ask
about the selects.
Quick editclick · Enter saves · Esc cancels
Date pickerpick a day
Label colourpalette
Filtercheckboxes · Apply
Coach mark3 steps · Next / Back / Skip
05

Rules & a11y

Markup, checklist and which one when
Markup
<!-- tooltip: describes the control -->
<button aria-describedby="tip-bold" aria-label="Bold">B</button>
<span role="tooltip" id="tip-bold">Bold · ⌘B</span>

<!-- popover: a small dialog -->
<button aria-haspopup="dialog" aria-expanded="true"
        aria-controls="share-pop">Share</button>
<div role="dialog" id="share-pop" aria-label="Share Spring 27">…</div>
Checklist7 of 8 checked
TOOLTIPA short label or hint. Read-only, appears on hover and focus.Icon names, shortcuts, truncated text
POPOVERA small panel with content or controls, opened on purpose.Share, quick edit, person card
DROPDOWNA list of actions or options to pick one from.Row ⋯ menu, select
MODALA focused task that blocks the page until done.Delete, invite, confirm
DO✓Keep tooltips to a few words — add the shortcut✓Delay ~300 ms, then show the next one instantly✓Flip and shift instead of getting clipped✓Let people move the pointer into a hover card✓Close popovers on Esc and outside click
DON’T✕Put buttons or links inside a tooltip✕Use a tooltip for information people need✕Rely on hover on touch screens✕Open two popovers at once✕Cover the thing the user is looking at