<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import { Button } from "kumo-svelte/components/button";
  import * as Tooltip from "kumo-svelte/components/tooltip";
</script>

<Tooltip.Provider>
  <Tooltip.Root content="Add new item">
    {#snippet render({ props })}
      <Button {...props} shape="square" aria-label="Add new item">
        <PlusIcon class="size-4" />
      </Button>
    {/snippet}
  </Tooltip.Root>
</Tooltip.Provider>

Import

import * as Tooltip from "kumo-svelte/components/tooltip";

Usage

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import * as Tooltip from "kumo-svelte/components/tooltip";
</script>

<Tooltip.Provider>
  <Tooltip.Root content="Tooltip text">
    {#snippet render({ props })}
      <Button {...props}>Hover me</Button>
    {/snippet}
  </Tooltip.Root>
</Tooltip.Provider>

For delay grouping across multiple tooltips, see TooltipProvider.

Examples

<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import { Button } from "kumo-svelte/components/button";
  import * as Tooltip from "kumo-svelte/components/tooltip";
</script>

<Tooltip.Provider>
  <Tooltip.Root content="Add">
    {#snippet render({ props })}
      <Button {...props} shape="square" aria-label="Add">
        <PlusIcon class="size-4" />
      </Button>
    {/snippet}
  </Tooltip.Root>
</Tooltip.Provider>

Multiple Tooltips

<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import TranslateIcon from "phosphor-svelte/lib/TranslateIcon";
  import { Button } from "kumo-svelte/components/button";
  import * as Tooltip from "kumo-svelte/components/tooltip";
</script>

<Tooltip.Provider>
  <div class="flex gap-2">
    <Tooltip.Root content="Add">
      {#snippet render({ props })}
        <Button {...props} shape="square" aria-label="Add">
          <PlusIcon class="size-4" />
        </Button>
      {/snippet}
    </Tooltip.Root>
    <Tooltip.Root content="Change language">
      {#snippet render({ props })}
        <Button {...props} shape="square" aria-label="Change language">
          <TranslateIcon class="size-4" />
        </Button>
      {/snippet}
    </Tooltip.Root>
  </div>
</Tooltip.Provider>

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 } from "kumo-svelte/components/button";
  import * as Tooltip from "kumo-svelte/components/tooltip";
</script>

<Tooltip.Provider>
  <div class="flex gap-4">
    <Tooltip.Root content="Opens after 1 second" delay={1000}>
      {#snippet render({ props })}
        <Button {...props} variant="secondary">1s open delay</Button>
      {/snippet}
    </Tooltip.Root>
    <Tooltip.Root content="Stays open 500ms after leaving" closeDelay={500}>
      {#snippet render({ props })}
        <Button {...props} variant="secondary">500ms close delay</Button>
      {/snippet}
    </Tooltip.Root>
    <Tooltip.Root content="Instant open, stays 1s" delay={0} closeDelay={1000}>
      {#snippet render({ props })}
        <Button {...props} variant="secondary">Instant + 1s close</Button>
      {/snippet}
    </Tooltip.Root>
  </div>
</Tooltip.Provider>

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.

<Tooltip.Provider>
  <App />
</Tooltip.Provider>

<Tooltip.Root content="Add">
  {#snippet render({ props })}
    <Button {...props} shape="square" aria-label="Add">+</Button>
  {/snippet}
</Tooltip.Root>

API Reference

Prop	Type	Default
children	`Snippet`	—
content*	`Snippet \| string`	—
render	`Snippet<[{ props: Record<string, unknown> }]>`	—
side	`KumoTooltipSide`	`KUMO_TOOLTIP_DEFAULT_VARIANTS.side`
align	`KumoTooltipAlign`	`"center"`
class	`string`	—
container	`PortalProps["to"]`	—
delay	`number`	`600`
closeDelay	`number`	—
disabled	`boolean`	`false`
open	`boolean`	`false`

Tooltip.Content

Prop	Type	Default
align	`KumoTooltipAlign`	`"center"`
arrow	`boolean`	`true`
container	`PortalProps["to"]`	—
side	`KumoTooltipSide`	`KUMO_TOOLTIP_DEFAULT_VARIANTS.side`

Tooltip.Portal

Prop	Type	Default
children	`Snippet`	—
to	`PortalProps["to"]`	—

Tooltip.Provider

Prop	Type	Default
children*	`Snippet`	—
delayDuration	`number`	—
skipDelayDuration	`number`	—
disableHoverableContent	`boolean`	—
disabled	`boolean`	—

Tooltip.Trigger

No component-specific props. This component accepts child content or standard forwarded attributes.

Trigger Composition

Use the render snippet for interactive controls so the tooltip trigger props land on the real button or link. Plain children are convenient for non-interactive inline text or icons. For lower-level composition, use TooltipRoot, TooltipTrigger, TooltipPortal, and TooltipContent.