Tooltip

Copy for LLM

Usage Warning

Tooltips hide content until hover or focus, are easy to miss, and cannot include links or other interactive elements. We discourage them in almost all situations. Before reaching for a tooltip, consider using ContextualHelp or Popover instead.

Import

import { Tooltip } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Tooltip is a brief, non-interactive hint on hover or focus, such as labeling an IconButton or expanding truncated text.

Do

Use plain text only.
For truncated text, show Tooltip only when the text is actually truncated.
When explaining a disabled control, anchor Tooltip to a wrapping element. Disabled controls do not receive pointer events.
Match the Tooltip label to the IconButton’s accessible name.

Avoid

Using Tooltip for essential information people without a pointer may never see. Put required detail in visible UI or ContextualHelp.
Using Tooltip for interactive content. Use Popover or ContextualHelp.

Design Update

The design of the Tooltip has recently been updated. The default background color of the Tooltip has been inverted to ensure proper contrast on white backgrounds.

Examples

Placement

The placement prop can be used to control the position of the Tooltip.Content relative to the trigger element. The default placement is top.

The tooltip accepts the following placements: top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, and right-end.

Custom Trigger

Use the <Focusable /> component to create a custom trigger for the Tooltip.

The Focusable component is an internal React Aria component (exported by React Core) that allows you to create custom focusable elements. More info can be found here: React Aria Focusable.

Open

The defaultOpen prop can be used to control the initial open state of the tooltip, placed on the Tooltip.Root component.

The isOpen prop can be used to control the open state of the tooltip. When open, the tooltip will remain open until the isOpen prop is set to 'false', or the Tooltip loses focus.

Delay

The delay prop can be used to control the delay (in milliseconds) before the tooltip is shown or “open”. By default, the delay is 1000ms.

Close Delay

Like the delay prop, the closeDelay prop can be used to control the delay (in milliseconds) before the tooltip is closed.