Tooltip

Definition: A tooltip displays information about the targeted UI element.

When to use

Use a tooltip to display supplementary information about an UI element. The content is usually concise and provides a quick description or explanation of the associated item's function.

Anatomy

Helper text

Title

Tooltip

Tip (Large only: top, right, left, bottom)

Variations

Small

Large

Large with multi lines

Position

Tooltips are often positioned near the associated UI element, usually above or below it, to avoid obstructing the user's view.

Trigger

Tooltips are triggered by hovering over the target element.

Where to use

✅ Unlabeled icons

✅ Buttons

✅ Links

Tooltips on buttons can help the user understand what kind of information they should enter or what will happen when they click on an element.

Even links benefit from tooltips as they inform users about the link's destination when clicked.

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.