Ark Logo
GitHub
Reat
Components
Tooltip

Tooltip

A label that provides information on hover or focus.

Anatomy

To set up the tooltip correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Tooltip component in your project. Let's take a look at the most basic example:

Controlled Tooltip

To create a controlled Tooltip component, manage the state of whether the tooltip is open using the open prop:

Using a Render Function

For more control over the Tooltip's functionality, you can use a function as a child, which provides access to the Tooltip API:

Adding an Arrow

To display an arrow pointing to the trigger from the tooltip, use the Tooltip.Arrow and Tooltip.ArrowTip components:

Configuring Delay Timings

To configure the delay timings for the Tooltip, use the closeDelay and openDelay props:

Custom Positioning

To customize the position of the Tooltip relative to the trigger, use the positioning prop:

API Reference

Accessibility

Complies with the Tooltip WAI-ARIA design pattern.

Keyboard Support

KeyDescription
Tab
Opens/closes the tooltip without delay.
Escape
If open, closes the tooltip without delay.