Basic Tooltip

<x-ui.tooltip text="This is a tooltip" position="top">
    <x-button>Hover me</x-button>
</x-ui.tooltip>

Positions

Triggers

With Icon

Long Text

Overview

Tooltip component provides contextual information on hover or click.

Usage

Wrap any element with tooltip:

<x-ui.tooltip text="Tooltip text" position="top">
    <x-button>Hover me</x-button>
</x-ui.tooltip>

Positions

  • top - Default, tooltip appears above
  • bottom - Tooltip appears below
  • left - Tooltip appears on the left
  • right - Tooltip appears on the right

Triggers

  • hover - Default, show on mouse hover
  • click - Show on click, hide on outside click

Props

text - string|null

Tooltip text content

position - string (default: top)

Tooltip position: top, bottom, left, right

trigger - string (default: hover)

Trigger event: hover or click

delay - int (default: 200)

Show delay in milliseconds

maxWidth - string|null

Maximum width for tooltip (e.g., '200px')

Features

  • Hover and click triggers
  • Multiple position options
  • Smooth animations
  • Arrow indicator
  • Dark mode support
  • Configurable delay
  • Long text support with max-width
  • Accessibility (ARIA attributes)