Tooltip

A short hover hint for icons and dense controls.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add tooltip

Usage

Import Tooltip and wrap a trigger element:

import * as Tooltip from '$lib/sivir/components/tooltip';

<Tooltip.Root>
  <Tooltip.Trigger>
    <button>Info</button>
  </Tooltip.Trigger>
  <Tooltip.Content>Helpful text here</Tooltip.Content>
</Tooltip.Root>

Examples

Tooltip in different placements and compositions.

Top placement

Right placement

Bottom placement

Anatomy

Tooltip.Root - Controls tooltip state.

Tooltip.Content - Renders tooltip content.

Tooltip.Trigger - Opens the tooltip.