Tooltip
Also called hover text or hover hint
A small label that appears next to an element when you hover over it or focus it, naming an icon button or adding a short hint.
import { Tooltip } from '@base-ui/react/tooltip';
const OPEN_DELAY = 500; // ignore a pointer that is only passing by
const SKIP_DELAY = 300; // after one closes, the next opens instantly for this long
const ACTIONS = [
{ label: 'Bold', shortcut: '⌘B', glyph: 'B', style: 'font-bold' },
{ label: 'Italic', shortcut: '⌘I', glyph: 'I', style: 'italic' },
{ label: 'Underline', shortcut: '⌘U', glyph: 'U', style: 'underline' }
];
export function FormattingToolbar() {
return (
<Tooltip.Provider delay={OPEN_DELAY} timeout={SKIP_DELAY}>
<div className='flex gap-1 rounded-lg border bg-background p-1'>
{ACTIONS.map(({ label, shortcut, glyph, style }) => (
<Tooltip.Root key={label}>
{/* The tooltip is visual only; aria-label names the button. */}
<Tooltip.Trigger
aria-label={label}
className={`flex size-8 items-center justify-center rounded-md text-sm hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring data-popup-open:bg-muted ${style}`}
>
{glyph}
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Positioner side='top' sideOffset={8}>
<Tooltip.Popup className='flex items-center gap-2 rounded-md bg-foreground px-2 py-1 text-xs text-background transition-[opacity,translate] duration-120 ease-out data-ending-style:opacity-0 data-instant:transition-none data-starting-style:translate-y-1 data-starting-style:opacity-0'>
{label}
<kbd className='font-sans opacity-60'>{shortcut}</kbd>
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
))}
</div>
</Tooltip.Provider>
);
}Add tooltips to the toolbar's icon buttons that show the action and its shortcut, like 'Bold ⌘B'. Open them after a 500ms hover delay, but once one is showing, open the next one instantly for 300ms after it closes. Place them 8px above the button, fade and slide them in by 4px over 120ms, show them on keyboard focus, hide them on Escape, and skip them on touch devices.
Paste into Layerwise or any AI coding tool.
What is Tooltip?
A tooltip is a short text bubble, usually dark, that appears near an element after the pointer rests on it for a moment. It is ideal for icon-only buttons in toolbars, where a picture alone can be ambiguous, and a handy place to show a keyboard shortcut.
Two timings make tooltips feel right. An open delay of roughly 400 to 700ms keeps them from flashing as the pointer passes by. Once one is open, moving to a neighboring button shows the next tooltip right away, often called skip delay. Turn it off in the demo to feel the difference.
Keep tooltips to a few words and never put essential information or buttons inside them: touch screens have no hover, and the tooltip vanishes once the pointer leaves. Show them on keyboard focus too, connect them to the button with aria-describedby or use the text as its accessible name, and close them on Escape.
Often confused with
- Popover
- A popover opens on click and can hold inputs and buttons. A tooltip only shows a short label while you hover or focus.
Related terms
All termsPopover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Keyboard shortcut
A key combination that runs an action directly, like ⌘S to save or ⌘K to open search, so frequent users can skip the mouse.
Delay
The wait between the moment an animation is triggered and the moment it starts moving, used to sequence motion or ignore brief triggers.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.