Ark Logo

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:

<script setup lang="ts">
import { Tooltip } from '@ark-ui/vue'
</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>

Controlled Tooltip

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

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

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

<template>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Context v-slot="tooltip">
        <Tooltip.Content>This tooltip is open: {{ tooltip.open.toString() }}</Tooltip.Content>
      </Tooltip.Context>
    </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:

<script setup lang="ts">
import { Tooltip } from '@ark-ui/vue'
</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:

<script setup lang="ts">
import { Tooltip } from '@ark-ui/vue'
</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:

<script setup lang="ts">
import { Tooltip } from '@ark-ui/vue'
</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

PropDefaultType
aria-label
string

Custom label for the tooltip.

closeDelay500
number

The close delay of the tooltip.

closeOnEscapetrue
boolean

Whether to close the tooltip when the Escape key is pressed.

closeOnPointerDowntrue
boolean

Whether to close the tooltip on pointerdown.

defaultOpen
boolean

The initial open state of the tooltip when it is first rendered. Use when you do not need to control its open state.

disabled
boolean

Whether the tooltip is disabled

id
string

The `id` of the tooltip.

ids
Partial<{ trigger: string content: string arrow: string positioner: string }>

The ids of the elements in the tooltip. Useful for composition.

interactivefalse
boolean

Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.

lazyMountfalse
boolean

Whether to enable lazy mounting

open
boolean

Whether the tooltip is open

openDelay1000
number

The open delay of the tooltip.

positioning
PositioningOptions

The user provided options used to position the popover content

unmountOnExitfalse
boolean

Whether to unmount on exit.

EmitEvent
openChange
[details: OpenChangeDetails]

Function called when the tooltip is opened.

update:open
[open: boolean]

Arrow

PropDefaultType
asChildfalse
boolean

ArrowTip

PropDefaultType
asChildfalse
boolean

Content

PropDefaultType
asChildfalse
boolean

Data AttributeValue
[data-scope]tooltip
[data-part]content
[data-state]"open" | "closed"
[data-placement]The placement of the content

Positioner

PropDefaultType
asChildfalse
boolean

Trigger

PropDefaultType
asChildfalse
boolean

Data AttributeValue
[data-scope]tooltip
[data-part]trigger
[data-expanded]Present when expanded
[data-state]"open" | "closed"

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.