Tooltips are used to provide additional context or help about an element. They appear when the user hovers over the item with their mouse for a short period o time.
Tooltips are automatically enabled when you use the title attribute with an element. For example:
<button title="More information" />- Don't use tooltips when the context or intent is already clear. For example, a "Print" button doesn't need a tooltip.
- Use tooltips when iconography is present without corresponding visual text. For example, a warning icon could have a tooltip that indicates that a field is invalid.
Tooltips should be as short and concise as possible. Keep tooltips to a few words.