Check annotations without using the mouse
Go to the icon using the keyboard and try on the touch screen. Captions must be able to open in the appropriate way; Information required for the decision needs to appear directly in the interface.
Tooltip Design system
Add explanation without hiding required information.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Interpretation of an index
The icon next to “Percentage of completion” opens a short explanation when focusing; The index label and value remain readable when the caption is closed.
Variants and use cases
How to open hint
Open with hover and focus when appropriate; Essential information should be visible immediately instead of hidden in a tooltip.
Try using only the keyboard and only the touch; still know the meaning of action.
Example Icon button with username; The tooltip adds shortcuts but does not change the name.
More informationExplain the operation, do not hide the content.
Additional information
Tooltips briefly explain a detail, avoiding repeating labels or containing complex tasks.
Read the label then tooltip; The supplement needs to answer what the user doesn't already know.
Example The data tooltip states the update date instead of repeating “Revenue”.
More informationExplain the operation, do not hide the content.Explain the operation, do not hide the content.
Width to read
Limit the width to match the length, giving line breaks without making the tooltip into a too narrow column.
Try long translations and small screens; Tooltip does not overflow horizontally.
Example An instruction sentence can be down to two lines in a compact frame.
More informationExplain the operation, do not hide the content.Explain the operation, do not hide the content.
Position relative to object
Keep the tooltip close to the part being explained, change direction when you reach the edge, and don't cover what needs to be read.
Focus icon close to the edge of the window; The hint remains completely within the field of view.
Example The tooltip on the right edge moves to the left of the button.
More informationInformationInformationMore information
Suitable case
Use tooltip for extra help; Errors, input requests, and important warnings require other display space.
Turn off tooltip; Users can still complete the task without missing required conditions.
Example The password request appears below the input box, the button shortcut can be in the tooltip.
Information
Turn on notificationsMore informationExplain the operation, do not hide the content.