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.

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>
)

import { Tooltip } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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>
    </>
  )
}

import { Tooltip } from '@ark-ui/solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <button @click="isOpen = !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>
</template>

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>
)

import { Tooltip } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <Tooltip.Root v-slot="{ isOpen }">
    <Tooltip.Trigger>Hover Me, isOpen {{ isOpen.toString() }}</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>This tooltip is open: {{ isOpen.toString() }}</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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>
)

import { Tooltip } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <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>
</template>

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>
)

import { Tooltip } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <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>
</template>

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>
)

import { Tooltip } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

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

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from '@ark-ui/vue'

const isOpen = ref(false)
</script>

<template>
  <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>
</template>

API Reference

Root

Prop	Type	Default
`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`	`boolean`	`false`
`onExitComplete`	`() => void`
`onOpenChange`	`(details: OpenChangeDetails) => void`
`open`	`boolean`
`openDelay`	`number`
`positioning`	`PositioningOptions`
`present`	`boolean`
`unmountOnExit`	`boolean`	`false`

Arrow

Prop	Type	Default
`asChild`	`boolean`

Content

Prop	Type	Default
`asChild`	`boolean`

Trigger

Prop	Type	Default
`asChild`	`boolean`

ArrowTip

Prop	Type	Default
`asChild`	`boolean`

Positioner

Prop	Type	Default
`asChild`	`boolean`