# Tooltip

URL: https://ark-ui.com/docs/components/tooltip
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/tooltip.mdx

A label that provides information on hover or focus.

---

<ComponentPreview id="Tooltip" />

## 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.

<Anatomy id="tooltip" />

## Examples

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

<Example id="basic" />

### Controlled Tooltip

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

<Example id="controlled" />

### 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:

<Example id="render-fn" />

### Adding an Arrow

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

<Example id="arrow" />

### Configuring Delay Timings

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

<Example id="timings" />

### Custom Positioning

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

<Example id="positioning" />

### Using the Root Provider

The `RootProvider` component provides a context for the tooltip. It accepts the value of the `useTooltip` hook. You can
leverage it to access the component state and methods from outside the tooltip.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | Custom label for the tooltip. |
| `closeDelay` | `number` | No | The close delay of the tooltip. |
| `closeOnClick` | `boolean` | No | Whether the tooltip should close on click |
| `closeOnEscape` | `boolean` | No | Whether to close the tooltip when the Escape key is pressed. |
| `closeOnPointerDown` | `boolean` | No | Whether to close the tooltip on pointerdown. |
| `closeOnScroll` | `boolean` | No | Whether the tooltip should close on scroll |
| `defaultOpen` | `boolean` | No | The initial open state of the tooltip when rendered.
Use when you don't need to control the open state of the tooltip. |
| `disabled` | `boolean` | No | Whether the tooltip is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` | No | The ids of the elements in the tooltip. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `interactive` | `boolean` | No | Whether the tooltip's content is interactive.
In this mode, the tooltip will remain open when user hovers over the content. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the tooltip is opened. |
| `open` | `boolean` | No | The controlled open state of the tooltip |
| `openDelay` | `number` | No | The open delay of the tooltip. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Arrow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ArrowTip Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-placement]` | The placement of the content |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTooltipReturn` | Yes |  |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | trigger |
| `[data-expanded]` | Present when expanded |
| `[data-state]` | "open" | "closed" |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | Custom label for the tooltip. |
| `closeDelay` | `number` | No | The close delay of the tooltip. |
| `closeOnClick` | `boolean` | No | Whether the tooltip should close on click |
| `closeOnEscape` | `boolean` | No | Whether to close the tooltip when the Escape key is pressed. |
| `closeOnPointerDown` | `boolean` | No | Whether to close the tooltip on pointerdown. |
| `closeOnScroll` | `boolean` | No | Whether the tooltip should close on scroll |
| `defaultOpen` | `boolean` | No | The initial open state of the tooltip when rendered.
Use when you don't need to control the open state of the tooltip. |
| `disabled` | `boolean` | No | Whether the tooltip is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` | No | The ids of the elements in the tooltip. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `interactive` | `boolean` | No | Whether the tooltip's content is interactive.
In this mode, the tooltip will remain open when user hovers over the content. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the tooltip is opened. |
| `open` | `boolean` | No | The controlled open state of the tooltip |
| `openDelay` | `number` | No | The open delay of the tooltip. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Arrow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ArrowTip Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-placement]` | The placement of the content |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTooltipReturn` | Yes |  |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | trigger |
| `[data-expanded]` | Present when expanded |
| `[data-state]` | "open" | "closed" |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | Custom label for the tooltip. |
| `closeDelay` | `number` | No | The close delay of the tooltip. |
| `closeOnClick` | `boolean` | No | Whether the tooltip should close on click |
| `closeOnEscape` | `boolean` | No | Whether to close the tooltip when the Escape key is pressed. |
| `closeOnPointerDown` | `boolean` | No | Whether to close the tooltip on pointerdown. |
| `closeOnScroll` | `boolean` | No | Whether the tooltip should close on scroll |
| `defaultOpen` | `boolean` | No | The initial open state of the tooltip when rendered.
Use when you don't need to control the open state of the tooltip. |
| `disabled` | `boolean` | No | Whether the tooltip is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` | No | The ids of the elements in the tooltip. Useful for composition. |
| `interactive` | `boolean` | No | Whether the tooltip's content is interactive.
In this mode, the tooltip will remain open when user hovers over the content. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `open` | `boolean` | No | The controlled open state of the tooltip |
| `openDelay` | `number` | No | The open delay of the tooltip. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Arrow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ArrowTip Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-placement]` | The placement of the content |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `TooltipApi<PropTypes>` | Yes |  |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | trigger |
| `[data-expanded]` | Present when expanded |
| `[data-state]` | "open" | "closed" |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | Yes | The unique identifier of the machine. |
| `aria-label` | `string` | No | Custom label for the tooltip. |
| `closeDelay` | `number` | No | The close delay of the tooltip. |
| `closeOnClick` | `boolean` | No | Whether the tooltip should close on click |
| `closeOnEscape` | `boolean` | No | Whether to close the tooltip when the Escape key is pressed. |
| `closeOnPointerDown` | `boolean` | No | Whether to close the tooltip on pointerdown. |
| `closeOnScroll` | `boolean` | No | Whether the tooltip should close on scroll |
| `defaultOpen` | `boolean` | No | The initial open state of the tooltip when rendered.
Use when you don't need to control the open state of the tooltip. |
| `disabled` | `boolean` | No | Whether the tooltip is disabled |
| `ids` | `Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` | No | The ids of the elements in the tooltip. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `interactive` | `boolean` | No | Whether the tooltip's content is interactive.
In this mode, the tooltip will remain open when user hovers over the content. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the tooltip is opened. |
| `open` | `boolean` | No | The controlled open state of the tooltip |
| `openDelay` | `number` | No | The open delay of the tooltip. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Arrow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ArrowTip Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-placement]` | The placement of the content |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseTooltipContext]>` | No |  |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTooltipReturn` | Yes |  |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tooltip |
| `[data-part]` | trigger |
| `[data-expanded]` | Present when expanded |
| `[data-state]` | "open" | "closed" |


### Context

These are the properties available when using `Tooltip.Context`, `useTooltipContext` hook or `useTooltip` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the tooltip is open. |
| `setOpen` | `(open: boolean) => void` | Function to open the tooltip. |
| `reposition` | `(options?: Partial<PositioningOptions>) => void` | Function to reposition the popover |


## Accessibility

Complies with the [Tooltip WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).

### Keyboard Support

<KeyBindingsTable id="tooltip" />