Skip to content
Borneo Design System

Tooltip

Stable

A short label revealed on hover or focus. Tooltips are supplementary by contract: they are unavailable on touch and easy to miss, so nothing essential may live only inside one.

Added in v1.1.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Hover the button, then Tab to it — the tooltip opens for both, and Escape dismisses it without moving focus.

Side
Align
Trigger
tooltip-preview.tsx
<Tooltip
  content="Copy link to clipboard"
  side="top"
  align="center"
>
  <IconButton label="Copy link" icon={<Copy />} />
</Tooltip>

AnatomyPermalink to this section

Copy link to clipboardarrow

PlacementPermalink to this section

Top is the default. The tooltip flips automatically when it would leave the viewport, so a preferred side is only a preference.

Top

Right

Bottom

Left

In a toolbarPermalink to this section

The case tooltips are built for: repeated icon-only controls whose meaning has to be learnable.

Related components