Tooltip

A tooltip shows a short hint next to its trigger, so users learn what a control does without leaving their task. It opens when users rest the mouse pointer on the trigger for 600 milliseconds, and at once when they move focus to the trigger with the keyboard. It stays open while the pointer is on the trigger or on the content, and it closes when the pointer or the focus leaves, when users press the trigger or outside of the tooltip, or when they press Escape. Touch input doesn't open the tooltip, so the hint must not hold anything that users need to finish their task. A TooltipProvider around several tooltips sets their delays in one place and opens the next tooltip at once while one of them is open or has just closed. The trigger is a button without styles of its own, so the examples render it as a Button. The content is at most 20rem wide and points to the trigger with an arrow.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@biem/ui/components/ui/tooltip";

export function TooltipDefault() {
	return (
		<Tooltip>
			<TooltipTrigger render={<Button variant="outline"/>}>Reorder</TooltipTrigger>
			<TooltipContent>Order 24 cases from the warehouse</TooltipContent>
		</Tooltip>
	);
}

ExamplesCopy Anchor Link

Top SideCopy Anchor Link

Most controls have room above them, and a hint placed there leaves the content that follows in view. The tooltip opens on this side by default, and side set to "top" makes that choice explicit.

Right SideCopy Anchor Link

Along a navigation at the left edge of the screen, a hint above an item would cover the item before it. With side set to "right", the hint opens beside the item and leaves the rest of the navigation readable.

Bottom SideCopy Anchor Link

Controls in a page header sit close to the top edge of the screen, with little room above them. Set to "bottom", side opens the hint below the control, where the page offers the room it needs.

Left SideCopy Anchor Link

Actions at the end of a table row sit near the right edge of the screen, and a hint above or below them would cover the neighboring rows. Through side set to "left", the hint opens at the height of its row and keeps the rows around it readable.

Keep Open on ClickCopy Anchor Link

A control that users press several times in a row, such as one that raises an order quantity step by step, still needs its hint after the first press. Usually a press on the trigger closes the tooltip, while closeOnClick set to false on the trigger keeps it open, so users can read the hint as they continue.

Cursor Tracking on X AxisCopy Anchor Link

On a wide trigger, such as a bar that spans the deliveries of a whole week, a hint at its center can appear far from the pointer. Once trackCursorAxis is set to "x", the hint follows the pointer from side to side and stays where users are looking. When keyboard focus opens it, the hint remains at the trigger.

ProviderCopy Anchor Link

In a toolbar, users often move from one control to the next to find the one they need. A TooltipProvider around those tooltips sets their delays in one place, and while one hint is open, the next one appears without delay as the pointer moves on. Unless the provider sets a delay, even the first hint opens as soon as the pointer reaches its trigger.

ControlledCopy Anchor Link

Pointing users to a control they have not used yet, for example after an update, calls for a hint that the application opens on its own. Through open and onOpenChange, the application holds the state of the tooltip, while hover, focus and Escape still work as users expect.

DisabledCopy Anchor Link

A hint loses its purpose once its control states what it does, for example when a collapsed navigation expands and shows its labels. With disabled set on the tooltip, the hint no longer opens and an open one closes, while the control itself stays fully usable.

API ReferenceCopy Anchor Link

TooltipCopy Anchor Link

TooltipTriggerCopy Anchor Link

TooltipContentCopy Anchor Link

TooltipProviderCopy Anchor Link