Tooltip

Stable
WCAG 2.2 evidence
RTL

A short description of a control, shown on hover and keyboard focus. Built on React Aria Tooltip inside a {@link TooltipTrigger}: role="tooltip", linked to the trigger with aria-describedby while open (WCAG 4.1.2); shown on focus as well as hover (WCAG 2.1.1); dismissible with Escape, hoverable and persistent until the pointer or focus leaves (WCAG 1.4.13). Animation runs only without reduced motion. Consumer duties: the trigger needs its own accessible name (the tooltip is a description, not the name); never put the only copy of essential information in a tooltip.

import { Tooltip } from "@nexera-ui/react";

Loading example…

5
examples: 19
props: 2
live controls: 1
platform: 7
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

placement

Generated code

import { Tooltip } from "@nexera-ui/react";

<Tooltip />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

With shortcut

Figma Show shortcut: the shortcut prop. Set aria-keyshortcuts on the trigger as well.

Loading example…

app.tsx

import { Button, Tooltip, TooltipTrigger } from "@nexera-ui/react";

export function WithShortcut() {
  return (
    <div className="p-16">
      <TooltipTrigger delay={200}>
        <Button variant="secondary" aria-keyshortcuts="E">
          Edit
        </Button>
        <Tooltip placement="top" />
      </TooltipTrigger>
    </div>
  );
}

Placements

Interactive: hover or Tab to each button. The tooltip shows on focus as well as hover, and Escape hides it.

Loading example…

app.tsx

import { Button, Tooltip, TooltipTrigger } from "@nexera-ui/react";

const placements = ["top", "bottom", "left", "right"] as const;

export function Placements() {
  return (
    <div className="grid grid-cols-2 gap-16 p-16">
      {placements.map((placement) => (
        <TooltipTrigger key={placement} delay={200}>
          <Button variant="secondary">{placement}</Button>
          <Tooltip placement={placement}>{`Shown ${placement}`}</Tooltip>
        </TooltipTrigger>
      ))}
    </div>
  );
}

Long content

Long text wraps at 20 rem instead of truncating. Keep tooltips to a short phrase; use Popover for more.

Loading example…

app.tsx

import { Tooltip } from "@nexera-ui/react";

<Tooltip placement="top" shortcut="E">
  Edit the employee record, including contract details, bank account and emergency contacts
</Tooltip>;

Right to left

Right-to-left: the text reads right to left and the shortcut follows the text; left/right stay physical sides.

Loading example…

app.tsx

import { Tooltip } from "@nexera-ui/react";

<Tooltip placement="top" shortcut="E">
  تعديل الموظف
</Tooltip>;

Props 19

Press "Try it" on a card to load that prop into the playground.

children*Nexera

ReactNode

Tooltip text, a short phrase such as "Edit employee". It describes the trigger (aria-describedby); never put essential information or interactive content here (use Popover or visible helper text).

shortcutNexera

string

Keyboard shortcut shown after the text, for example "E". Shown when provided. Also set aria-keyshortcuts on the trigger when the shortcut exists.

placementNexera

"top" | "bottom" | "left" | "right"

Side of the trigger the tooltip appears on. Flips to the opposite side when there is no room. left and right are physical sides and do not mirror in right-to-left layouts.

offsetNexera

number

Distance in px between the trigger and the bubble; the 6 px arrow sits in this gap (value UNVERIFIED).

classNameNexera

string

Extra classes for the bubble, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the bubble.

arrowBoundaryOffsetReact Aria

number

The minimum distance the arrow's edge should be from the edge of the overlay element.

triggerRefReact Aria

RefObject<Element | null>

The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone.

isEnteringReact Aria

boolean

Whether the tooltip is currently performing an entry animation.

isExitingReact Aria

boolean

Whether the tooltip is currently performing an exit animation.

containerPaddingReact Aria

number

The placement padding that should be applied between the element and its surrounding container.

crossOffsetReact Aria

number

The additional offset applied along the cross axis between the element and its anchor element.

shouldFlipReact Aria

boolean

Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

isOpenReact Aria

boolean

Whether the element is rendered.

defaultOpenReact Aria

boolean

Whether the overlay is open by default (uncontrolled).

onOpenChangeReact Aria

(isOpen: boolean) => void

Handler that is called when the overlay's open state changes.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

4 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.12Text SpacingLevel AA · supporting test
1.4.13Content on Hover or FocusLevel AA · tested directly
2.1.1KeyboardLevel A · tested directly
2.3.3Animation from InteractionsLevel AAA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<Tooltip className="shadow-sm" />

Used in blocks

Helpdesk assistantMessaging and collaboration

Theme studio

Tooltip

Try every prop. Copy the code.

Examples 4

With shortcut

Placements

Long content

Right to left

Props 19

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components