Tooltip

Hover tooltip with configurable placement, delay, and optional arrow.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Tooltip } from '@kittl/ui-react';

Usage

Web Component

<kittl-tooltip content="Save your changes" side="bottom">
  <kittl-button>Save</kittl-button>
</kittl-tooltip>

<kittl-tooltip content="With arrow" arrow>
  <kittl-button variant="secondary">Hover me</kittl-button>
</kittl-tooltip>

React

<Tooltip content="Save your changes" side="bottom">
  <Button>Save</Button>
</Tooltip>

<Tooltip content="With arrow" arrow>
  <Button variant="secondary">Hover me</Button>
</Tooltip>

Props

Property	Type	Default	Description
content	string	''	Tooltip text
side	'top' | 'right' | 'bottom' | 'left'	'top'	Preferred side
sideOffset	number	8	Offset from trigger in pixels
delay	number	200	Show delay in milliseconds
arrow	boolean	false	Show arrow pointing to trigger
controlled	boolean	false	Manual control mode
open	boolean	false	Visibility (only when controlled)

Controlled Mode

Set controlled to manage visibility yourself:

<kittl-tooltip content="Manual tooltip" controlled open>
  <span>Always visible</span>
</kittl-tooltip>

In uncontrolled mode (default), the tooltip auto-opens on hover/focus and closes on leave/blur.

Accessibility

• Trigger has aria-describedby linking to the tooltip
• Tooltip has role="tooltip" and aria-hidden when closed
• Keyboard: Escape closes the tooltip, focus/blur toggles it