Tooltip

Display contextual information on hover or focus.

Live Demo

Placements

With Icons

Custom Content

With Delay

Usage

<template>
  <!-- Simple text tooltip -->
  <orio-tooltip text="Hello World">
    <orio-button variant="secondary">Hover me</orio-button>
  </orio-tooltip>

  <!-- Custom content slot -->
  <orio-tooltip placement="top">
    <orio-button variant="secondary">Hover me</orio-button>
    <template #content>
      <div>Custom HTML content</div>
    </template>
  </orio-tooltip>

  <!-- With delay -->
  <orio-tooltip text="Delayed" :delay="300">
    <orio-button variant="secondary">Hover me</orio-button>
  </orio-tooltip>
</template>

Props

Prop	Type	Default	Description
text	string	undefined	Tooltip text (when not using content slot)
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Tooltip position relative to trigger
delay	number	500	Delay before showing tooltip (ms)
disabled	boolean	false	Disable tooltip
offset	number	8	Distance from trigger element (px)

Slots

Slot	Description
default	Trigger element
content	Custom tooltip content (overrides text prop)

Features

• Automatic positioning with arrow indicator
• Shows on hover and focus (keyboard accessible)
• Teleports to body to avoid z-index issues
• Updates position on scroll and resize
• Configurable delay
• Support for custom content via slot
• Dark theme by default