Tooltip

Shows additional context on tap or hover.

Anatomy

A Tooltip is a feedback component that displays a short, informational message when a user hovers over or focuses on a UI element.

Panel : Contains the Panel Content
Content : An area to display any text content

Usage

A tooltip can be added to any element if adding the tooltip increases the user’s comprehension. It is common to see tooltips added to icons, fields, and links. However it is important to use reason when adding tooltips to elements. Avoid adding tooltips to elements that don’t need description or elements that are so large it would be difficult to understand what the tooltip is describing.

Common places buttons appear: Icons , Fields, links etc.

When to use

To keep extra information off the screen but accessible.
To add context to a given screen.
To add explanations to visuals such as icons.

When not to use

For small bits of information connected to a single action
For large and/or structured content
For small interactions or choices
To add hidden information to the screen itself

Accessibility

Tooltips are great for keeping information initially hidden. In order for users to access it, they need to know it’s there. Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse.

You can use show direct information with label instead

Don't

use tooltips to communicate crucial information

Content

When creating tooltip :

Keep your tooltips clear and concise. Use the fewest number of words without sacrificing meaning.
Tooltips should provide new and valuable information. Never use a tooltip to repeat information already available in the UI
If the tooltip is a full sentence, include a period at the end. If the tooltip is a fragment, do not include a period at the end.
Don’t use tooltips to communicate crucial information
You can use tooltips to describe icons

use concise descriptions within tooltips

Don't

wordy or lengthy descriptions within tooltips.