Overlays

Tooltip

A short hint on hover and keyboard focus.

Ant Design: Tooltip

import { TooltipTrigger, Tooltip } from '@alea/ui';

Examples

On hover after a short delay, and right away on keyboard focus.

A tooltip explains, it never holds the only copy of something important.

Contrast must be at least 4.5:1 for body text.

A short hint on hover or keyboard focus. Not for anything the user must read to act.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. (React Aria)
`className`	`ClassNameOrFunction<TooltipRenderProps>`	-	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria)
`defaultOpen`	`boolean`	-	Whether the overlay is open by default (uncontrolled). (React Aria)
`isOpen`	`boolean`	-	Whether the element is rendered. (React Aria)
`offset`	`number`	`8`	The additional offset applied along the main axis between the element and its anchor element. (React Aria)
`onOpenChange`	`((isOpen: boolean) => void)`	-	Handler that is called when the overlay's open state changes. (React Aria)
`placement`	`"start" \| "end" \| "bottom" \| "top" \| "bottom left" \| "bottom right" \| "bottom start" \| "bottom end" \| "top left" \| "top right" \| "top start" \| "top end" \| "l…`	-	The placement of the tooltip with respect to the trigger. (React Aria)
`style`	`StyleOrFunction<DisclosureGroupRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria)

Wraps a focusable trigger and its Tooltip. Default delay 600 ms, 0 when moving between tooltips.

Prop	Type	Default	Description
`closeDelay`	`number`	`200`	The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/web/rsp/components/tooltip#behaviors). (React Aria)
`defaultOpen`	`boolean`	-	Whether the overlay is open by default (uncontrolled). (React Aria)
`delay`	`number`	`600`	The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/web/rsp/components/tooltip#behaviors). (React Aria)
`isDisabled`	`boolean`	-	Whether the tooltip should be disabled, independent from the trigger. (React Aria)
`isOpen`	`boolean`	-	Whether the overlay is open by default (controlled). (React Aria)
`onOpenChange`	`((isOpen: boolean) => void)`	-	Handler that is called when the overlay's open state changes. (React Aria)
`trigger`	`"focus" \| "hover"`	-	By default, opens for both focus and hover. Can be made to open only for focus. (React Aria)

Key	Does
`Tab`	Focusing the trigger shows it
`Escape`	Hides it

Don't