ComponentsOverlay
Tooltip
A small popup with contextual info on hover or focus.
Overview
A tooltip shows a brief, supplementary label when the user hovers or focuses a
trigger. Wrap usage in a TooltipProvider.
$ npx morpha-ui add tooltipInstallation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add tooltip. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add tooltipAPI Reference
The table documents the Tooltip root. TooltipProvider, TooltipTrigger, and
TooltipContent forward their Radix props.
Prop
Type
Accessibility
- The trigger must be focusable so keyboard users can reveal the tooltip.
- Keep the content short — a tooltip is a hint, not a place for essential content.
- A
TooltipProvideris 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.