Components / Overlays

Tooltip

Short, non-interactive help on hover or focus.

Preview

Use cases

Explain an icon

Add short supplementary help to an already named control.

Clarify a term

Explain a label on focus and hover without requiring a separate help page.

Usage example

Vue

<script setup lang="ts">
import Tooltip from './components/ui/tooltip/Tooltip.vue'
import TooltipTrigger from './components/ui/tooltip/TooltipTrigger.vue'
import TooltipContent from './components/ui/tooltip/TooltipContent.vue'
</script>

<template>
  <Tooltip>
    <TooltipTrigger aria-label="Keyboard help">?</TooltipTrigger>
    <TooltipContent>Use arrow keys to move through options.</TooltipContent>
  </Tooltip>
</template>

More examples

Keyboard help

The trigger has its own accessible name; the tooltip adds description.

Keyboard help

<script setup lang="ts">
import Tooltip from './components/ui/tooltip/Tooltip.vue'
import TooltipTrigger from './components/ui/tooltip/TooltipTrigger.vue'
import TooltipContent from './components/ui/tooltip/TooltipContent.vue'
</script>
<template>
  <Tooltip>
    <TooltipTrigger aria-label="Keyboard help">?</TooltipTrigger>
    <TooltipContent>Use arrow keys to move between options.</TooltipContent>
  </Tooltip>
</template>

Delayed explanation

Adjust the hover delay for a dense interface.

Delayed explanation

<script setup lang="ts">
import Tooltip from './components/ui/tooltip/Tooltip.vue'
import TooltipTrigger from './components/ui/tooltip/TooltipTrigger.vue'
import TooltipContent from './components/ui/tooltip/TooltipContent.vue'
</script>
<template>
  <Tooltip :delay="700" side="bottom">
    <TooltipTrigger>Sync status</TooltipTrigger>
    <TooltipContent>Changes sync when you are online.</TooltipContent>
  </Tooltip>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Tooltip
Name	Type	Default or requirement
`delay / closeDelay`	number, ms	400 / 120
`width / gap`	number, px	240 / 8
`align / side`	start \| center \| end / top \| bottom	center / top
`disabled`	boolean	false

The trigger still needs its own accessible name. The arrow follows the trigger when collision handling shifts the tooltip. Use Popover when the content has controls.

Implementation notes

TooltipContent is noninteractive; use Popover for links or controls.
Focus opens immediately, while pointer hover respects delay and closeDelay.

Accessibility and localization

The trigger must have a name without relying on tooltip text.
Keep essential instructions visible elsewhere; touch users do not get hover-only content.