Overview

Key Features

• Placement options: Offers multiple placement and alignment options around the trigger.
• Accessibility: Fully keyboard and screen-reader accessible.Anatomy

1. Tooltip Content: A brief, non-interactive text label that provides additional information about an element.
2. Arrow: A small triangular indicator that points to the element the tooltip is describing.

Look and Feel

Themes

Placement

The menu’s placement can be set to the top, bottom, right, or left of its trigger, with alignment options for left, right, or center. If space is constrained, it automatically adjusts to ensure visibility on screen.

Best Practice

Do:

• Use tooltips for brief, helpful explanations that enhance user understanding without cluttering the UI.
• Keep text concise—aim for just a few words or a short sentence.
• Use tooltips to clarify icons or abbreviations when their meaning might not be immediately obvious.

Don’t:

• Use tooltips for essential information—users relying on touch devices may not see them at all.
• Overuse tooltips—if too many are present, reconsider the clarity of your UI design.

Tooltips vs. Popovers

 

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Component checklist

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.