Principality of KaharagiaDesign System

Tooltip

Use tooltips to provide additional context or help text for form fields and interface elements. Built with Radix UI Tooltip for full accessibility.

Default Tooltip

Tooltips appear on hover and focus. Click the help icon below to see the tooltip.

National Insurance number

import * as Tooltip from '@radix-ui/react-tooltip';
import { HelpCircle } from 'lucide-react';

<Tooltip.Provider delayDuration={200}>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <button className="radix-tooltip-trigger" aria-label="Help">
        <HelpCircle size={18} />
      </button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content className="radix-tooltip-content" sideOffset={5}>
        Tooltip content here...
        <Tooltip.Arrow className="radix-tooltip-arrow" />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

Tooltip with Form Label

<label className="form-label" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
  National Insurance number
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <button className="radix-tooltip-trigger" aria-label="Help">
        <HelpCircle size={18} />
      </button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content className="radix-tooltip-content" sideOffset={5}>
        Help text...
        <Tooltip.Arrow className="radix-tooltip-arrow" />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</label>

Tooltip Positioning

Use the side prop to control tooltip placement.

<Tooltip.Content side="top" sideOffset={5}>...</Tooltip.Content>
<Tooltip.Content side="right" sideOffset={5}>...</Tooltip.Content>
<Tooltip.Content side="bottom" sideOffset={5}>...</Tooltip.Content>
<Tooltip.Content side="left" sideOffset={5}>...</Tooltip.Content>

Usage Guidelines

Do

  • Use for supplementary information that helps users
  • Keep tooltip text concise (1-2 sentences)
  • Use the help icon consistently for tooltips
  • Set an appropriate delay before showing (200-300ms)

Don't

  • Don't hide essential information in tooltips
  • Don't use tooltips for form validation errors
  • Don't make tooltips the only way to access help
  • Don't use tooltips on touch-only devices without alternatives

Accessibility

  • Built with Radix UI Tooltip for full WAI-ARIA compliance
  • Tooltips are triggered by both hover and keyboard focus
  • Automatic focus management and screen reader announcements
  • Collision detection prevents tooltips from going off-screen
  • Consider using visible hint text for critical information

CSS Classes

/* Radix Tooltip */
.radix-tooltip-trigger { }
.radix-tooltip-content { }
.radix-tooltip-arrow { }

Installation

npm install @radix-ui/react-tooltip lucide-react