BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Tooltip

Stable
Edit in Studio

A short label that appears on hover and keyboard focus. It names icon buttons and reveals truncated text for sighted users; the accessible name always lives on the trigger.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • Every IconButton, with the same text as its label.
  • Truncated text, to show the full value.
  • Wrap the app once in TooltipProvider so neighbouring tooltips open instantly after the first one.

Not for

  • Information users need to complete a task: show it inline or in a Popover. Tooltips are invisible on touch screens.
  • Interactive content (links, buttons): tooltips cannot be reached. Use Popover.
  • Repeating a visible label: it adds noise.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Match the trigger's label

IconButton label="Copy token name" and the tooltip "Copy token name": what users see and hear is the same.

Don't

Tooltips on disabled buttons to explain why

Disabled buttons do not receive focus, so keyboard users never see it. Explain inline instead.

Accessibility

  • Base UI treats tooltips as visual labels: the trigger must carry the accessible name (IconButton label), which screen readers announce. The popup is not announced.
  • Opens on hover after the provider delay (500ms) and immediately on keyboard focus; Escape dismisses it.
  • The trigger must be focusable: wrap a Button, IconButton or Link, never plain text.
  • Inverse surface (tooltip.bg, tooltip.text) passes 4.5:1 in both themes.

Anatomy and tokens

Read from packages/react/src/components/Tooltip/Tooltip.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

17 tokens 9 semantic or component, change with theme and brand 8 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Tooltip/Tooltip.tsx, so this table cannot drift from the code.

Prop Type Default Description
content required ReactNode none The tooltip text. Short, plain, no interactive content.
children required ReactElement none The trigger: a focusable element that forwards its ref and spreads props (Button, IconButton, Link).
side 'top' | 'bottom' | 'left' | 'right' 'top' Preferred side. Default `top`.
align 'start' | 'center' | 'end' 'center' No description in the code yet.
delay number none Hover delay in ms for this tooltip; otherwise the TooltipProvider delay applies.
open boolean none No description in the code yet.
defaultOpen boolean none No description in the code yet.
onOpenChange (open: boolean) => void none No description in the code yet.
disabled boolean false Turn the tooltip off without unwrapping the trigger.
className string none No description in the code yet.

Comes with TooltipProvider, each accepting native <div> attributes.

Playground

Tooltip has no typed options to play with: it is a container. Compose it with TooltipProvider and any native attribute. Here it is in both themes.

Light
Dark

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Tooltip in Storybook) .

Embed Storybook stories here (3)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

Toolbar

AllStates

Changelog

  • New

    Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items). Every popup carries the theme, brand and density scope. Adds menu and drawer component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes