Skip to main content

​
Overview

The Tooltip component displays helpful text hints when hovering over an element. Supports text, keyboard shortcuts, and custom positioning.

​
Basic Usage

<template>
  <UTooltip text="This is a helpful tooltip">
    <template #default>
      <UButton>Hover me</UButton>
    </template>
  </UTooltip>
</template>

​
Props

​
text
string
The text content of the tooltip.
​
kbds
KbdProps['value'][] | KbdProps[]
Array of keyboard keys to display in the tooltip.
​
content
TooltipContentProps
Configuration object for tooltip positioning and behavior.
​
arrow
boolean | TooltipArrowProps
default:"false"
Display an arrow pointing to the trigger element.
​
portal
boolean | string | HTMLElement
default:"true"
Render the tooltip in a portal.
​
reference
HTMLElement
The reference element for positioning. If not provided, uses the trigger element.
​
open
boolean
Controls the open state of the tooltip (v-model:open).
​
defaultOpen
boolean
The default open state when uncontrolled.
​
delayDuration
number
Delay in milliseconds before the tooltip appears.
​
disableHoverableContent
boolean
Prevent the tooltip from staying open when hovering over its content.
​
disableClosingTrigger
boolean
Prevent the tooltip from closing when the trigger is activated.
​
ignoreNonKeyboardFocus
boolean
Prevent the tooltip from opening on non-keyboard focus events.
​
disabled
boolean
Disable the tooltip. Automatically disabled when no text or kbds are provided.
​
class
any
CSS class for styling the trigger element.
​
ui
object
Theme customization object for component slots.

​
Events

​
update:open
(open: boolean) => void
Emitted when the open state changes.

​
Slots

​
default
{ open: boolean }
The trigger element that shows the tooltip on hover. Receives the current open state.
​
content
{ ui: object }
Custom content for the tooltip, replacing the default text and keyboard shortcuts.

​
Examples

​
With Keyboard Shortcuts

<template>
  <UTooltip text="Save file" :kbds="['meta', 'S']">
    <template #default>
      <UButton icon="i-lucide-save" />
    </template>
  </UTooltip>
</template>

​
With Arrow

<template>
  <UTooltip text="Tooltip with arrow" :arrow="true">
    <template #default>
      <UButton>Hover me</UButton>
    </template>
  </UTooltip>
</template>

​
Different Positions

<template>
  <div class="flex gap-4">
    <UTooltip text="Top tooltip" :content="{ side: 'top' }">
      <UButton>Top</UButton>
    </UTooltip>
    
    <UTooltip text="Right tooltip" :content="{ side: 'right' }">
      <UButton>Right</UButton>
    </UTooltip>
    
    <UTooltip text="Bottom tooltip" :content="{ side: 'bottom' }">
      <UButton>Bottom</UButton>
    </UTooltip>
    
    <UTooltip text="Left tooltip" :content="{ side: 'left' }">
      <UButton>Left</UButton>
    </UTooltip>
  </div>
</template>

​
With Delay

<template>
  <UTooltip text="This appears after 500ms" :delay-duration="500">
    <template #default>
      <UButton>Hover and wait</UButton>
    </template>
  </UTooltip>
</template>

​
Custom Content

<template>
  <UTooltip>
    <template #default>
      <UButton>Custom tooltip</UButton>
    </template>
    <template #content>
      <div class="p-2">
        <p class="font-bold">Custom Content</p>
        <p class="text-sm">You can put anything here</p>
      </div>
    </template>
  </UTooltip>
</template>

​
Multiple Keyboard Shortcuts

<template>
  <UTooltip 
    text="Search" 
    :kbds="[
      { value: 'meta', size: 'xs' },
      { value: 'K', size: 'xs' }
    ]"
  >
    <template #default>
      <UButton icon="i-lucide-search" />
    </template>
  </UTooltip>
</template>

​
On Icon Button

<template>
  <div class="flex gap-2">
    <UTooltip text="Edit">
      <UButton icon="i-lucide-pencil" variant="ghost" />
    </UTooltip>
    
    <UTooltip text="Delete">
      <UButton icon="i-lucide-trash" variant="ghost" color="error" />
    </UTooltip>
    
    <UTooltip text="Share">
      <UButton icon="i-lucide-share" variant="ghost" />
    </UTooltip>
  </div>
</template>

​
Disabled Tooltip

<template>
  <UTooltip text="This won't show" :disabled="true">
    <template #default>
      <UButton>No tooltip</UButton>
    </template>
  </UTooltip>
</template>

​
Content Props

The content prop accepts the following positioning options:
  • side: 'top' | 'right' | 'bottom' | 'left' - Which side to position the tooltip
  • sideOffset: number - Distance in pixels from the trigger
  • align: 'start' | 'center' | 'end' - Alignment along the side
  • alignOffset: number - Offset along the alignment axis
  • collisionPadding: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> - Padding from viewport edges
  • avoidCollisions: boolean - Whether to adjust position to avoid collisions
  • sticky: 'partial' | 'always' - Sticky behavior during scrolling

​
Accessibility

The Tooltip component automatically:
  • Disables when no content is provided
  • Provides proper ARIA attributes
  • Supports keyboard navigation
  • Can be configured to ignore non-keyboard focus for better accessibility
  • Popover - For interactive floating content
  • Kbd - For displaying keyboard shortcuts
  • Tooltip - Reka UI Tooltip documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us