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:

import { Tooltip } from '@ark-ui/react'

const Basic = () => (
  <Tooltip.Root lazyMount unmountOnExit>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

Controlled Tooltip

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

import { Tooltip } from '@ark-ui/react'
import { useState } from 'react'

const Controlled = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <Tooltip.Root open={isOpen}>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.Root>
    </>
  )
}

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:

import { Tooltip } from '@ark-ui/react'

const RenderFn = () => (
  <Tooltip.Root>
    {({ isOpen }) => (
      <>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>This tooltip is open: {isOpen.toString()}</Tooltip.Content>
        </Tooltip.Positioner>
      </>
    )}
  </Tooltip.Root>
)

Adding an Arrow

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

import { Tooltip } from '@ark-ui/react'

const Arrow = () => (
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>
        <Tooltip.Arrow>
          <Tooltip.ArrowTip />
        </Tooltip.Arrow>
        I am a tooltip!
      </Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

Configuring Delay Timings

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

import { Tooltip } from '@ark-ui/react'

const Timings = () => (
  <Tooltip.Root closeDelay={0} openDelay={0}>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

Custom Positioning

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

import { Tooltip } from '@ark-ui/react'

const Positioning = () => (
  <Tooltip.Root
    positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}
  >
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

API Reference

Root

PropTypeDefault
aria-label
string
closeDelay
number
closeOnEsc
boolean
closeOnPointerDown
boolean
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
getRootNode
() => Node | ShadowRoot | Document
id
string
ids
Partial<{ trigger: string content: string arrow: string positioner: string }>
interactive
boolean
lazyMount
booleanfalse
onExitComplete
() => void
onOpenChange
(details: OpenChangeDetails) => void
open
boolean
openDelay
number
positioning
PositioningOptions
present
boolean
unmountOnExit
booleanfalse

Arrow

PropTypeDefault
asChild
boolean

Content

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

ArrowTip

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean