Tooltip

A customizable, accessible popup that displays information related to an element.

Installation

npx vayu-ui init #one time only

npx vayu-ui add tooltip

npx vayu-ui add -t tooltip #with test case needs

Usage

Positions

Variants

Options

Accessibility (WCAG 2.2)

Inline text

<Tooltip content="Tooltip describing the button" position="top">
  <button>Hover me</button>
</Tooltip>

<Tooltip content="Disables arrow" showArrow={false}>
  <button>Hover me</button>
</Tooltip>

<Tooltip content="Uses success variant with delay" variant="success" delay={500}>
  <button>Hover me</button>
</Tooltip>

Anatomy

<Tooltip content="Content String">
  <button>Trigger Element</button>
</Tooltip>

Accessibility

Keyboard support: Full keyboard navigation support (Escape dismisses the tooltip, opens on focus).
ARIA attributes: Automatically handles role="tooltip" and aria-describedby linking.
Focus behavior: Mounts dynamically, respects prefers-reduced-motion, and won't trap focus.

Screen readers will announce the trigger's accessible name first, followed by the tooltip content dynamically when it appears or when focused, linked via aria-describedby.

Component Folder Structure

Tooltip/
├── Tooltip.tsx
├── index.ts
└── types.ts

Props

Prop	Type	Default	Description
`content`	`ReactNode`	-	Tooltip content — string or JSX.
`position`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Placement relative to the trigger.
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "destructive" \| "info"`	`"default"`	Colour variant.
`delay`	`number`	`200`	Show delay in ms.
`hideDelay`	`number`	`150`	Hide delay in ms.
`disabled`	`boolean`	`false`	Disable the tooltip entirely.
`showArrow`	`boolean`	`true`	Show the directional arrow.
`ensureTouchTarget`	`boolean`	`true`	Minimum size for touch targets (WCAG 2.5.8).