Tooltip

When to useLink to "When to use"

• A hint that explains a control, such as a shortcut or what an action exports.
• Extra detail the user can do without.

Use something else when:

• the text is essential to using the control: put it in a visible label or description
• the content is interactive or long: a popover or dialog
• the control is an icon-only button: IconButton, which requires a label

UsageLink to "Usage"

import { Button, Tooltip } from "@arshad-shah/cynosure";
import { download } from "@arshad-shah/cynosure/icons";

<Tooltip content="Download as JSON">
  <Button icon={download}>Export</Button>
</Tooltip>
<Tooltip content="Copy link" placement="bottom" delay={500}>
  <Button variant="ghost">Share</Button>
</Tooltip>

The child must be one focusable element (a Button, IconButton or Link). Keep content short and non-interactive.

PlacementLink to "Placement"

placement is top (default), bottom, start or end. The tooltip flips and shifts to stay in the viewport, and follows its trigger on scroll and resize.

TimingLink to "Timing"

Hover opens after delay milliseconds (default 300). Keyboard focus opens it immediately.

Sometimes, or for the eye onlyLink to "Sometimes, or for the eye only"

disabled turns the tooltip off without remounting its trigger, for a tooltip that only matters some of the time, such as the full text of a label while it is cut short. describe={false} is for a tip that repeats the trigger's own name (that same cut-short label): it still shows, but screen readers, which already hear the name, are not read it again as a description. whenTruncated does both for the full text of a label: the tip is on only while the text is cut short (measured after every render and, with one ResizeObserver, whenever its box is resized), and it never describes the trigger. Pass true to measure the trigger, or a function that picks the element inside it holding the text. Tabs, StatusBar and DataGrid use it.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• WCAG 1.4.13: the tooltip is hoverable, dismissible with Escape, and stays while hovered or focused.
• Description: the trigger gets aria-describedby pointing to the tooltip, and any existing value is kept.
• Top layer: it uses the Popover API, so it is never clipped and works inside shadow roots.

TouchLink to "Touch"

It never opens on touch. Do not rely on a tooltip for information touch users need.

ThemingLink to "Theming"

Tokens: --cy-tooltip-{bg,ink,radius,max-width}.

createTheme({ components: { tooltip: { radius: "6px", maxWidth: "240px" } } });

RelatedLink to "Related"

IconButton · Button · Link