Tooltip
A label that provides information on hover or focus.
You can explore the Tooltip component in the following curated examples.
Popover with Tooltip
Render a Popover with a Tooltip that shows upon hovering over the Popover Trigger.
Slider with Tooltip
Render a Slider with a Tooltip that shows the current value of the Slider.
Tooltip with following cursor
Render a Tooltip that follows the cursor when hovering over the target element.
Dialog with Tooltip
Render a Dialog with a Tooltip that shows upon hovering over the Dialog Trigger.
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/tooltip'
export const Basic = () => (
<Tooltip.Root>
<Tooltip.Trigger disabled>Hover Me</Tooltip.Trigger>
<Tooltip.Positioner>
<Tooltip.Content>I am a tooltip!</Tooltip.Content>
</Tooltip.Positioner>
</Tooltip.Root>
)
import { Tooltip } from '@ark-ui/solid/tooltip'
import { Portal } from 'solid-js/web'
export 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 { Tooltip } from '@ark-ui/vue/tooltip'
</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:
import { Tooltip } from '@ark-ui/react/tooltip'
import { useState } from 'react'
export const Controlled = () => {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<button type="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/tooltip'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
export const Controlled = () => {
const [isOpen, setIsOpen] = createSignal(false)
return (
<>
<button type="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 { Tooltip } from '@ark-ui/vue/tooltip'
import { ref } from '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/tooltip'
export const RenderFn = () => (
<Tooltip.Root>
<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
<Tooltip.Positioner>
<Tooltip.Context>
{(tooltip) => (
<Tooltip.Content>This tooltip is open: {tooltip.open.toString()}</Tooltip.Content>
)}
</Tooltip.Context>
</Tooltip.Positioner>
</Tooltip.Root>
)
import { Tooltip } from '@ark-ui/solid/tooltip'
import { Portal } from 'solid-js/web'
export const RenderFn = () => (
<Tooltip.Root>
<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
<Portal>
<Tooltip.Positioner>
<Tooltip.Context>
{(context) => (
<Tooltip.Content>This tooltip is open: {context().open.toString()}</Tooltip.Content>
)}
</Tooltip.Context>
</Tooltip.Positioner>
</Portal>
</Tooltip.Root>
)
<script setup lang="ts">
import { Tooltip } from '@ark-ui/vue/tooltip'
</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:
import { Tooltip } from '@ark-ui/react/tooltip'
export 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/tooltip'
import { Portal } from 'solid-js/web'
export 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 { Tooltip } from '@ark-ui/vue/tooltip'
</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/tooltip'
export 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/tooltip'
import { Portal } from 'solid-js/web'
export 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 { Tooltip } from '@ark-ui/vue/tooltip'
</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/tooltip'
export const Positioning = () => (
<Tooltip.Root
positioning={{
placement: 'left-start',
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/tooltip'
import { Portal } from 'solid-js/web'
export const Positioning = () => (
<Tooltip.Root
positioning={{
placement: 'left-start',
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 { Tooltip } from '@ark-ui/vue/tooltip'
</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
Accessibility
Complies with the Tooltip WAI-ARIA design pattern.
Keyboard Support
Key | Description |
---|---|
Tab | Opens/closes the tooltip without delay. |
Escape | If open, closes the tooltip without delay. |