Ark Logo
Reat
Components
Tooltip

Tooltip

A label that provides information on hover or focus.

You can explore the Tooltip component in the following curated examples.

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.