Tooltip

A lightweight, edge-aware tooltip that flips placement automatically when it would clip against the viewport. Delayed enter, instant exit - no library dependencies.

Installation

npx stepwise-ui add tooltip

import { Tooltip } from '@/components/stepwise/tooltip'

// Basic - top by default
<Tooltip content="Save to cloud">
  <button>Save</button>
</Tooltip>

// Explicit side
<Tooltip content="Opens settings panel" side="right">
  <IconButton icon={<Settings />} />
</Tooltip>

// Flips automatically near viewport edges
<Tooltip content="Left-aligned but flips right near the edge" side="left">
  <button>Hover me</button>
</Tooltip>

// Rich content
<Tooltip content={<span>Press <kbd>⌘K</kbd> to open</span>} side="bottom">
  <button>Keyboard shortcut</button>
</Tooltip>

Usage

import { Tooltip } from '@/components/stepwise/tooltip'

// Basic - top by default
<Tooltip content="Save to cloud">
  <button>Save</button>
</Tooltip>

// Explicit side
<Tooltip content="Opens settings panel" side="right">
  <IconButton icon={<Settings />} />
</Tooltip>

// Flips automatically near viewport edges
<Tooltip content="Left-aligned but flips right near the edge" side="left">
  <button>Hover me</button>
</Tooltip>

// Rich content
<Tooltip content={<span>Press <kbd>⌘K</kbd> to open</span>} side="bottom">
  <button>Keyboard shortcut</button>
</Tooltip>

Props

PropTypeDescription

content

ReactNode

The text or rich content displayed inside the tooltip bubble.

children

ReactElement

The trigger element. Must be a single element - the tooltip injects its own ref and event listeners via cloneElement.

side

"top" | "bottom" | "left" | "right"

Preferred placement. The tooltip automatically flips to the opposite or roomiest side when the preferred side does not have enough space. Default: "top".

className

string

Extra classes applied to the tooltip bubble itself - useful for overriding max-width or styling.