Tooltip

Use GdsTooltip to show a short hint when the user hovers, focuses, or long-presses an element - most often an icon-only button. Always keep tooltip text short; if you need to explain more than a few words, use helper text or a popover instead.

Usage

Placement

There are 12 placements: combinations of top / right / bottom / left with optional -start / -end for alignment. The tooltip auto-flips to stay inside the viewport if there isn’t room for the requested side.

Arrow

Pass arrow to render a pointer connecting the tooltip to the target. Helpful when the target is small (e.g. an icon button) and you want to make the association explicit.

Disabled elements

Disabled buttons (and other disabled form controls) don’t fire mouse events, so a tooltip wrapped directly around them won’t open. Wrap the disabled element in a <span> so the tooltip can still receive events:

Accessibility

By default, title acts as the accessible label for the child element (replaces what a screen reader would normally announce). If the tooltip is providing additional context - for example, “Send invitation” on a button already labeled “Invite” - pass describeChild so the tooltip text is announced as a description instead.

Props