Tooltip

A popup that displays information related to an element on hover or focus.

Component Source

View the source code for the tooltip component.

$lib/components/ui/tooltip/tooltip-content.svelte

Installation

npx nnuikit add tooltip

import * as Tooltip from "$lib/components/ui/tooltip";

Quick Start

Wrap your triggers in a Tooltip.Provider, then use Tooltip.Root, Tooltip.Trigger, and Tooltip.Content to compose a tooltip.


<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Button variant="tertiary">Hover me</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>This is a tooltip</p>
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Placement

Use the side prop on Tooltip.Content to control where the tooltip appears relative to the trigger. Supports top, bottom, left, and right.


<Tooltip.Provider>
  <div class="flex items-center gap-16">
    <Tooltip.Root>
      <Tooltip.Trigger>
        <Button variant="tertiary">Top</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="top">
        <p>Tooltip on top</p>
      </Tooltip.Content>
    </Tooltip.Root>

    <Tooltip.Root>
      <Tooltip.Trigger>
        <Button variant="tertiary">Bottom</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="bottom">
        <p>Tooltip on bottom</p>
      </Tooltip.Content>
    </Tooltip.Root>

    <Tooltip.Root>
      <Tooltip.Trigger>
        <Button variant="tertiary">Left</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="left">
        <p>Tooltip on left</p>
      </Tooltip.Content>
    </Tooltip.Root>

    <Tooltip.Root>
      <Tooltip.Trigger>
        <Button variant="tertiary">Right</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="right">
        <p>Tooltip on right</p>
      </Tooltip.Content>
    </Tooltip.Root>
  </div>
</Tooltip.Provider>

Custom Delay

Control the open delay using delayDuration on the Tooltip.Provider or individual Tooltip.Root. Set to 0 for instant tooltips.


<Tooltip.Provider delayDuration={0}>
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Button variant="tertiary">No delay</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>Appears instantly</p>
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Accessibility

Keyboard: focus trigger to show tooltip

Screen reader: tooltip content is announced via aria-describedby

Hover: appears on mouse hover with configurable delay

Escape: pressing Escape dismisses the tooltip

API Reference

Tooltip.Provider

Wraps your app or a section of it to provide shared tooltip configuration such as delay duration.

Prop	Type	Default	Description
`delayDuration`	`number`	700	The duration in milliseconds from when the pointer enters the trigger until the tooltip opens.
`disableHoverableContent`	`boolean`	false	When true, prevents the tooltip content from remaining open when hovering over it.
`skipDelayDuration`	`number`	300	How much time a user has to enter another trigger without incurring a delay again.

Tooltip.Root

Contains all the parts of an individual tooltip. Manages visibility state.

Prop	Type	Default	Description
`open`	`boolean`	false	The controlled open state of the tooltip.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`delayDuration`	`number`	700	Override the provider's delay duration for this specific tooltip instance.
`disableHoverableContent`	`boolean`	false	Override the provider's disableHoverableContent for this specific tooltip instance.

Tooltip.Content

The popup content that appears when the tooltip is open. Renders inside a portal with an arrow indicator.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	'top'	The preferred side of the trigger to render against.
`sideOffset`	`number`	0	The distance in pixels from the trigger.
`align`	`'start' \| 'center' \| 'end'`	'center'	The preferred alignment against the trigger.
`arrowClasses`	`string`	-	Additional CSS classes to apply to the tooltip arrow element.
`class`	`string`	-	Additional CSS classes to apply to the tooltip content.

Built on bits-ui — Tooltip uses Tooltip from bits-ui for positioning, portal rendering, and ARIA attributes. For the full primitive API (animations, forceMount, etc.), see the bits-ui Tooltip docs.