Tooltip

<script lang="ts">
  import { Button, Tooltip, TooltipProvider } from '$lib';
  import { Plus } from 'phosphor-svelte';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <TooltipProvider>
    <Tooltip content="Add new item">
      <Button shape="square" aria-label="Add new item"><Plus class="size-4" /></Button>
    </Tooltip>
  </TooltipProvider>
</div>

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

<script lang="ts">
  import { Button, Tooltip, TooltipProvider } from '$lib';
  import { Plus } from 'phosphor-svelte';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <TooltipProvider>
    <Tooltip content="Add"><Button shape="square" aria-label="Add"><Plus class="size-4" /></Button></Tooltip>
  </TooltipProvider>
</div>

Multiple Tooltips

<script lang="ts">
  import { Button, Tooltip, TooltipProvider } from '$lib';
  import { Plus, Translate } from 'phosphor-svelte';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <TooltipProvider>
    <div class="flex gap-2">
      <Tooltip content="Add"><Button shape="square" aria-label="Add"><Plus class="size-4" /></Button></Tooltip>
      <Tooltip content="Change language"><Button shape="square" aria-label="Change language"><Translate class="size-4" /></Button></Tooltip>
    </div>
  </TooltipProvider>
</div>

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.

<script lang="ts">
  import { Button, Tooltip, TooltipProvider } from '$lib';

  const longContent =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <TooltipProvider>
    <div class="flex w-full justify-between">
      <Tooltip content={longContent} side="bottom">
        <Button variant="secondary">Near left edge</Button>
      </Tooltip>
      <Tooltip content={longContent} side="bottom">
        <Button variant="secondary">Centered</Button>
      </Tooltip>
      <Tooltip content={longContent} side="bottom">
        <Button variant="secondary">Near right edge</Button>
      </Tooltip>
    </div>
  </TooltipProvider>
</div>

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).

<script lang="ts">
  import { Button, Tooltip, TooltipProvider } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <TooltipProvider>
    <div class="flex gap-4">
      <Tooltip content="Opens after 1 second" delay={1000}><Button variant="secondary">1s open delay</Button></Tooltip>
      <Tooltip content="Stays open 500ms after leaving" closeDelay={500}><Button variant="secondary">500ms close delay</Button></Tooltip>
      <Tooltip content="Instant open, stays 1s" delay={0} closeDelay={1000}><Button variant="secondary">Instant + 1s close</Button></Tooltip>
    </div>
  </TooltipProvider>
</div>

## 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