العربيةScan free
Build · New

Tooltip

Explains an icon or a term in a few words when people hover it or focus it with the keyboard.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/tooltip

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { DefinitionTooltip, IconTooltip, Tooltip } from "@/components/ui/tooltip";
<IconTooltip content="Fees apply to international transfers." />
<DefinitionTooltip content="International bank account number">IBAN</DefinitionTooltip>
<Tooltip content="Copy IBAN"><IconButton icon={CopyIcon} label="Copy IBAN" /></Tooltip>

Examples

Position and arrow

side top, bottom, inline start or inline end (mirrors in Arabic), align start or end, and arrow={false} for no arrow.

Toolbar

Icon buttons name their action in a tooltip too; TooltipProvider makes the next tooltip open at once.

API reference

Tooltip

PropTypeDefaultDescription
contentReactNodeFigma's Text: one short sentence, no links or buttons.
childrenReactElementThe focusable element it explains.
side"top" | "bottom" | "inline-start" | "inline-end""top"Figma's Tooltip (position).
align"start" | "center" | "end""center"Top left / Top right.
arrowbooleantrueTop no arrow.
delay / open / defaultOpen / onOpenChange…Delay and open control.

IconTooltip / DefinitionTooltip

PropTypeDefaultDescription
labelstringThe info button's name; default “More information”.
childrenReactNodeDefinition: the term (IBAN, APR).
…Tooltip props…As on Tooltip.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

KeyAction
TabFocusing the trigger shows the tooltip.
EscapeHides the tooltip.

ARIA

  • The trigger carries aria-describedby pointing at a hidden copy of the text that is always there, so the description is read even while the tooltip is closed.
  • Don't put anything needed to finish a task inside, and don't rely on it on touch-only screens.

Arabic and RTL notes

Mirrors

  • inline-start and inline-end mirror: Figma's “Left” becomes the right in Arabic.
  • The portaled bubble carries the page's direction and language.

Does not mirror

  • The information icon doesn't mirror.
Numerals
Numbers in the text follow numerals through formatNumber.
Arabic typography
body-12; the taller Arabic line makes the bubble taller.
Mixed-direction text
A Latin term like IBAN inside an Arabic sentence stays intact: it's an isolated button.

All components ›