Tooltip

Guidelines React

Github Storybook Markdown Copy for LLM

Import

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

Live Editor

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.

Props

Visit the Documentation Site for the full list of props.

Tooltip.Root

Name	Type	Default	Description
closeDelay	number	500	The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
delay	number	1500	The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
isDisabled	boolean	-	Whether the tooltip should be disabled, independent from the trigger.
isOpen	boolean	-	Whether the overlay is open by default (controlled).
onOpenChange	(isOpen: boolean) => void	-	Handler that is called when the overlay's open state changes.
shouldCloseOnPress	boolean	true	Whether the tooltip should close when the trigger is pressed.
trigger	"hover" | "focus"	'hover'	By default, opens for both focus and hover. Can be made to open only for focus.

Tooltip.Content