@sarfarajey/react-ui-primitives

Accessible, keyboard- and touch-aware React UI primitives with Tailwind CSS styling.

Install

npm install @sarfarajey/react-ui-primitives

Requires React 18+ and Tailwind CSS in your project.

Tooltip

Fully accessible tooltip with mouse, keyboard, and touch support.

import { Tooltip, InfoIcon, LabelWithTip } from '@sarfarajey/react-ui-primitives';

// Basic usage
<Tooltip text="This is the tooltip content.">
  <InfoIcon />
</Tooltip>

// All positions
<Tooltip text="Above" position="top">...</Tooltip>
<Tooltip text="Below" position="bottom">...</Tooltip>
<Tooltip text="Left" position="left">...</Tooltip>
<Tooltip text="Right" position="right">...</Tooltip>

// Custom styling
<Tooltip
  text="Custom themed tooltip"
  tooltipClassName="bg-blue-900"
>
  <InfoIcon />
</Tooltip>

// Form label with built-in tooltip icon (LabelWithTip)
<LabelWithTip
  htmlFor="provider"
  label="Provider"
  tip="The AI company that trains the model."
  className="text-sm font-medium"
/>

Behavior

| Input | Action | |-------|--------| | Mouse hover | Show / hide | | Tab focus | Show | | Blur | Hide | | Escape | Hide | | Touch long-press (500ms) | Show | | Touch move | Cancel pending show | | Second tap while visible | Hide |

ARIA

• Trigger wrapper: tabIndex={0}, aria-describedby={tooltipId}
• Tooltip span: role="tooltip", aria-hidden={!visible}
• The tooltip is always in the DOM so aria-describedby resolves at all times.

Props

<Tooltip>

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | — | Tooltip copy | | children | ReactNode | — | Trigger element | | position | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Bubble position | | className | string | '' | Extra classes on trigger wrapper | | tooltipClassName | string | '' | Extra classes on bubble |

<LabelWithTip>

| Prop | Type | Default | Description | |------|------|---------|-------------| | htmlFor | string | — | Input id to associate | | label | string | — | Label text | | tip | string | — | Tooltip copy | | className | string | '' | Extra classes on <label> | | position | TooltipPosition | 'top' | Tooltip position |

License

MIT