GitHub55X

Tooltip

Vue tooltip that shows a short hint on hover or focus for icons, truncated labels, and controls.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/tooltip.json

Usage

      
      <script setup lang="ts">
import { Tooltip } from "@/components/ui/tooltip";
</script>

<template>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Teleport to="body">
      <Tooltip.Positioner>
        <Tooltip.Content>I am a tooltip!</Tooltip.Content>
      </Tooltip.Positioner>
    </Teleport>
  </Tooltip.Root>
</template>

Composition

      
      Tooltip.Root
├── Tooltip.Trigger
└── Tooltip.Positioner
    ├── Tooltip.Arrow
    │   └── Tooltip.ArrowTip
    └── Tooltip.Content

Examples

Controlled

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

Root Provider

An alternative way to control the tooltip is to use the RootProvider component and the useTooltip hook. This way you can access the state and methods from outside the component.

Arrow

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

Delay

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

Positioning

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

Context

Access the tooltip's state and methods with Tooltip.Context or the useTooltipContext hook:

Within Fixed Containers

When rendering a tooltip inside a fixed-position container, set positioning.strategy to "fixed" to ensure proper positioning.

Multiple Triggers

Share a single tooltip across multiple trigger elements. Pass a value to each Tooltip.Trigger — the tooltip repositions to whichever trigger is hovered without closing.

API

See Ark UI Tooltip docs for full props and examples.

Toggle GroupTour