Tooltip | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Usage

Show a short supplementary description on hover and keyboard focus. Wrap a single focusable trigger.

In Base UI 1.9, a tooltip is a visual, supplementary label. Don't rely on it for the accessible name. Name the trigger itself. Don't put essential descriptions or interactive elements in it. Use the page content or a Popover instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

TooltipProvider → Tooltip(label) → single focusable trigger

Keyboard and accessibility

Focusing the trigger shows the tooltip. Escape closes it. The tooltip never receives focus.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { TooltipProvider, Tooltip, Button } from '@surflane/ui'

<TooltipProvider>
  <Tooltip label='Inspect the build logs'>
    <Button variant='outline'>Logs</Button>
  </Tooltip>
  <Tooltip label='Run the pipeline again' shortcut={['mod', 'shift', 'r']}>
    <Button variant='outline'>Rerun</Button>
  </Tooltip>
</TooltipProvider>

Key API

Tooltip — common wrapper props
Prop	Contract	Default
`label`	ReactNode: a few words, an icon or emphasis; nothing interactive	required
`shortcut`	the keys of a shortcut for the same action, as Kbd takes them, set apart after the label: ['mod', 'b'] reads ⌘B on Apple platforms and Ctrl+B elsewhere	—
`disabled`	keeps the tooltip from opening; the trigger stays as it is	false
`side / align / sideOffset`	placement around the trigger	right / center / 10
`children`	single ReactElement	required

The table lists the common wrapper's main props. See the package type declarations for the full types.