Tooltip

Installation

Barrel

import { Tooltip, TooltipProvider } from 'kumo-svelte';

Granular

import { Tooltip, TooltipProvider } from 'kumo-svelte/components/tooltip';

Usage

<script lang="ts">import { Tooltip, Button } from "kumo-svelte";</script><Tooltip content="Tooltip text">  <Button>Hover me</Button></Tooltip>

For delay grouping across multiple tooltips, see TooltipProvider.

Examples

Multiple Tooltips

Long Content / Overflow

Tooltips with long content automatically constrain their width to the available viewport space using --available-width from Bits UI's floating positioning. Hover over the edge buttons to see the tooltip wrap instead of overflowing the viewport.

Delay Control

Use delay to control how long to wait before opening (default: 600ms) and closeDelay to control how long to wait before closing (default: 0ms).

## TooltipProvider

TooltipProvider groups multiple tooltips so that after the first tooltip has been shown, switching to another skips the open delay. Place it once at your app root or layout — not around each individual Tooltip.

// Wrap your app or layout once<TooltipProvider>  <App /></TooltipProvider>// Then use Tooltip anywhere inside<Tooltip content="Add">  <Button shape="square" aria-label="Add">    <PlusIcon />  </Button></Tooltip>

API Reference

Prop	Type	Default	Description
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`"top"`	Preferred floating side.
class	`string`	-	Additional classes merged onto the tooltip popup.
children	`Snippet`	-	Child snippet rendered by the component.
content *	`string \| Snippet`	-	Content to display inside the tooltip popup.
trigger	`Snippet<[Record<string, unknown>]>`	-	trigger prop.
open	`boolean`	-	Controlled open state.
onOpenChange	`(open: boolean) => void`	-	Called when open state changes.
align	`'start' \| 'center' \| 'end'`	-	Floating alignment.
delay	`number`	`600`	How long to wait before opening the tooltip, in milliseconds.
container	`HTMLElement \| string`	`document.body`	Portal container for custom roots or Shadow DOM.
disabled	`boolean`	-	Disables the component.

TooltipProvider

Prop	Type	Default	Description
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`"top"`	Preferred floating side.
content *	`string \| Snippet`	-	Content to display inside the tooltip popup.
trigger	`Snippet<[Record<string, unknown>]>`	-	trigger prop.
open	`boolean`	-	Controlled open state.
onOpenChange	`(open: boolean) => void`	-	Called when open state changes.
align	`'start' \| 'center' \| 'end'`	-	Floating alignment.
delay	`number`	`600`	How long to wait before opening the tooltip, in milliseconds.
container	`HTMLElement \| string`	`document.body`	Portal container for custom roots or Shadow DOM.
disabled	`boolean`	-	Disables the component.

Kumo Svelte