# Tooltip

Source: https://design.ritchiebros.com/components/data-display/tooltip/

Tooltips are floating labels that briefly explain the function of an interface element. They appear on hover, focus, tap, or click.

## Figma

The Figma reference for **Tooltip** will appear here once the design link is added.

## Storybook

Interactive examples for **Tooltip** will render here once the Storybook link is wired in.

## Best practices

- Provide useful, additional information or clarification.
- Succinctly describe or expand on the element they point to.
- Provide one for icon-only buttons or a control with an associated keyboard shortcut.
- Don’t use tooltips to communicate critical information such as form errors.
- Don’t put links or buttons inside a tooltip.
- Use them sparingly — needing many tooltips is a sign the design or language should be clarified.

## Do’s and don’ts

**Do:** Write concise, sentence-case helper text: “Buyer’s premium is added to the final hammer price.”

**Don’t:** Put urgent account or error information in a tooltip: “Your deposit must be paid immediately.”

## Related components

- [TextField](https://design.ritchiebros.com/components/inputs/text-field/)
- [Link](https://design.ritchiebros.com/components/navigation/link/)