Tooltip

Short hint on hover or focus. Use for icon buttons and truncated labels — not for critical instructions.

Examples

On hover

Overview

Wrap demos (and usually your app subtree) in TooltipProvider. Each tooltip is a root with a trigger, portal, positioner, and popup. Style the trigger with Button via render.

tsx

import {
  Button,
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipPositioner,
  TooltipPopup,
} from "@standard-ui/react"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button />}>Save</TooltipTrigger>
    <TooltipPortal>
      <TooltipPositioner>
        <TooltipPopup>Save changes</TooltipPopup>
      </TooltipPositioner>
    </TooltipPortal>
  </Tooltip>
</TooltipProvider>

Usage

Provider

Place one TooltipProvider near the top of the tree so delay and grouping stay consistent across tooltips.

tsx

<TooltipProvider>
  {/* tooltips */}
</TooltipProvider>

Copy

Keep popup text to a few words. Name the action the control performs — for example "Save changes" on a Save button.

tsx

<TooltipPopup>Save changes</TooltipPopup>

API

Parts mirror Base UI Tooltip. Prefer render={<Button />} on the trigger.

Part	Role
TooltipProvider	Shared delay and provider context.
Tooltip	Root open state for one tooltip.
TooltipTrigger	Anchor that opens the tooltip. Use Button via render.
TooltipPortal	Renders the popup outside the tree.
TooltipPositioner	Positions the popup. Default `sideOffset` is 6.
TooltipPopup	Visible hint content.

Guidelines

Do

Wrap with TooltipProvider
Use tooltips for icon-only controls and truncated text
Keep copy short and action-oriented

Don't

Don't put essential instructions only in a tooltip
Don't nest a Button inside TooltipTrigger — use render
Don't use long paragraphs or interactive content in the popup