Tooltip

Introduction

A tooltip is a short message that appears when hovering over a button or icon (info-circle) with text. It provides additional information or indicates that an action is required before interaction. Tooltips are useful for offering contextual help or clarification without cluttering the interface.

Variants

• Basic tooltip: The basic tooltip are simple text boxes that appear on hover. Each tooltip supports angled placement on all sides of the box.
• Compact tooltip: The compact tooltip has the same properties as the basic tooltip but with reduced padding and font size for smaller screen sizes or when space is limited.

Interactive demo

Try the interactive demo below to explore different tooltip variants and placements.

Best practices

• Short text: Tooltips are intended for brief, supplemental information. Keep the content short and to the point.
• Interactions: Tooltips should appear on hover—not on click. On mobile, they may appear on tap as long as the element is not a button or navigation item.
• Multiple tooltips: When using tooltips on several elements (e.g., in a table), add a slight delay to their appearance to reduce visual noise and avoid accidental pop-ups.

Examples

Here are some examples of usage of the tooltip component:

Tooltips in components

Tooltips can be used within various components. See the links below for more information on how tooltips can be integrated with these components.