Tooltip

Overview

A tooltip shows a brief, supplementary label when the user hovers or focuses a trigger. It is built on the Base UI Tooltip primitive — the show/hide delay, positioning and dismissal on scroll all come from the primitive — and styled to the kit's MD3 "plain tooltip": an inverse-surface bubble that flips light/dark against the page, a 4px corner radius and type-caption label text, the kit's auxiliary-hint scale (also used by Kbd and table/marker captions).

$ npx morpha-ui add tooltip

Composition

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button />} />
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

TooltipProvider sets the shared show delay for every tooltip beneath it — wrap it once near the root of your app, or locally around a single tooltip.

Examples

Side

side takes top, right, bottom, left, or the logical inline-start / inline-end (which flip with dir="rtl"). The arrow and the enter transition both follow the edge the bubble opens on.

With keyboard shortcut

Drop a Kbd alongside the label to pair a hint with its shortcut. Kbd detects the tooltip's inverted surface and switches to a translucent tint automatically, so it stays legible on the dark bubble.

Disabled trigger

A disabled button drops pointer events entirely, so it can never open a tooltip on its own. Render the trigger on a focusable span that wraps the disabled button instead — the span carries the hover/focus that opens the tooltip, the button underneath stays inert.

RTL

Wrap the app in DirectionProvider and set dir="rtl". left / right mirror with the document; because the content is portalled, set dir on TooltipContent too (or on <html>).

Styling

State lives on data attributes: data-side, plus the usual data-starting-style / data-ending-style transition hooks the rest of the kit's popups share. The enter animates a fade + scale from the trigger's transform origin; under prefers-reduced-motion only the fade remains.

Coming from shadcn? Same parts (Tooltip, TooltipTrigger, TooltipContent, TooltipProvider) and the same side prop, but the bubble uses the MD3 inverse-surface / inverse-on-surface pair instead of the page's raw foreground / background, a 4px corner radius instead of rounded-md, and type-caption instead of text-xs — so it reads as one system with <Snackbar> and <Kbd> rather than a one-off dark bubble.

Installation

Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add tooltip.

npx morpha-ui add tooltip

API Reference

The table documents the Tooltip root. TooltipProvider, TooltipTrigger, and TooltipContent forward their Base UI props.

Prop

Type

Accessibility

The trigger must be focusable so keyboard users can reveal the tooltip — wrap a disabled element instead of relying on it directly (see Disabled trigger).
Keep the content short — a tooltip is a hint, not a place for essential content or interactive elements.
A TooltipProvider is required (it can wrap the whole app once).

The tooltip content is rendered in a portal on document.body, so inside the preview it follows the site theme rather than the frame's light/dark toggle.

On this page