Skip to main content
Back to Home

Tooltip

An accessible tooltip component that displays additional information on hover or focus. Fully keyboard accessible with ESC key support and proper ARIA attributes.

Basic Usage

Hover over or focus on the button to see the tooltip.

import { AccessibleTooltip } from '@a13y/react';

function Example() {
  return (
    <AccessibleTooltip content="This is a helpful tooltip">
      <button>Hover me</button>
    </AccessibleTooltip>
  );
}

Placement

Tooltips can be positioned on different sides of the trigger element.

<div className="flex gap-4">
  <AccessibleTooltip content="Top tooltip" placement="top">
    <button>Top</button>
  </AccessibleTooltip>

  <AccessibleTooltip content="Right tooltip" placement="right">
    <button>Right</button>
  </AccessibleTooltip>

  <AccessibleTooltip content="Bottom tooltip" placement="bottom">
    <button>Bottom</button>
  </AccessibleTooltip>

  <AccessibleTooltip content="Left tooltip" placement="left">
    <button>Left</button>
  </AccessibleTooltip>
</div>

Custom Delay

Control when the tooltip appears with the delay prop.

<AccessibleTooltip content="Appears after 500ms" delay={500}>
  <button>Delayed tooltip</button>
</AccessibleTooltip>

Props

NameTypeDefaultDescription
content*ReactNode-The content to display in the tooltip
children*ReactNode-The trigger element that shows the tooltip on hover/focus
placement'top' | 'right' | 'bottom' | 'left''top'Position of the tooltip relative to the trigger
delaynumber200Delay in milliseconds before showing the tooltip
classNamestring-Optional CSS class for the tooltip container
styleReact.CSSProperties-Optional inline styles for the tooltip

Accessibility Features

  • ✓Uses aria-describedby to associate tooltip with trigger
  • ✓ESC key dismisses the tooltip
  • ✓Automatically shows on keyboard focus
  • ✓Configurable delay prevents accidental triggers
  • ✓Screen reader accessible with proper ARIA labels