Tooltip Component
Accessible React tooltip shown on hover and keyboard focus. Four positions, show delay, Escape dismissal and WCAG-friendly behavior — built with Tailwind CSS.
Import
javascript
1import { Tooltip } from "@neuctra/ui";Basic Usage
Wraps its child; appears on hover and on keyboard focus.
Positions
Rich Content & Delay
Props
All available props for the Tooltip component.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip content (required) |
| children | ReactNode | — | Trigger element (required) |
| position | "top" | "bottom" | "left" | "right" | "top" | Placement relative to the trigger |
| delay | number | 150 | Show delay in milliseconds |
| disabled | boolean | false | Never show the tooltip |
| className | string | — | Extra classes for the trigger wrapper |
| contentClassName | string | — | Extra classes for the bubble |
| arrowClassName | string | — | Extra classes for the triangular pointer |
Accessibility
- Uses role="tooltip" linked to the trigger with aria-describedby while visible.
- Opens on keyboard focus, not just hover, and closes on Escape (WCAG 1.4.13).
- The bubble is pointer-events-none, so it never blocks the cursor.
Frequently Asked Questions
How do I install and import the Tooltip component?
Install the @neuctra/ui package, then import it with: import { Tooltip } from "@neuctra/ui";
Can I customize the Tooltip component's appearance?
Yes. Tooltip accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.
Is the Tooltip component accessible?
Tooltip is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.