Tooltip

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

Import

import '@kittl/ui';

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

Usage

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

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

/** Basic Tooltip usage, rendered live on the docs site. */
export const TooltipUsage = () => (
  <>
    <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	Attribute	Type	Default	Description
content	content	string	''	Tooltip text
side	side	'top' | 'right' | 'bottom' | 'left'	'top'	Preferred side
sideOffset	sideOffset	number	8	Offset from trigger in pixels
delay	delay	number	200	Show delay in milliseconds
arrow	arrow	boolean	false	Show arrow pointing to trigger
controlled	controlled	boolean	false	Manual control mode
open	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>

<Tooltip content="Manual tooltip" controlled open>
  <span>Always visible</span>
</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