Tooltips
When the user begins an interactive action with the object being described (text, images, input boxes, etc.), an auxiliary or help prompt should immediately appear following the action.
Anatomy
Take Profit and Stop Loss Instructions
2
1
1: Popover
A container for text, allowing it to be displayed more clearly.
2. Copywriting
Simple descriptive text that serves as supplementary information for the target element.
Type/Variant
Usage scenario
Tips Information
Tooltip
Interaction
TooltipTooltipTooltipTooltipTooltipTooltipTooltipTooltipToolti
pTooltipTooltipTooltipTooltipTooltipTooltipTooltipTooltipToolti
pTooltipTooltip
Tips Information
Supplement
When the mouse hovers or the keyboard focuses on the target element, the text bubble appears immediately;
When the mouse or keyboard moves away from the target element, the text bubble disappears immediately.
Label
Multilingual
Tooltips, information, tips, information
Tips, information, tips, tips in Tooltips, information, tips, information
Tips, information, tips, tips in
Tips Information
Explanation
Maximum width: 360px
Auto wrap
RTL
TooltipTips InformationTips Information
Tips InformationTips InformationTips In
LTR
Tooltips, information, tips, info
Tips, info, tips, tips in
RTL
Usage
Tooltip
Tips Information
TooltipTooltipTooltipTooltipTooltip
Share
Tips Information
Don't
Display interactive information: Text tooltips should not carry interactive action information. When actions need to be displayed, consider using a Popover.
Usage
Tooltip
Tips Information
Do
Share
Share
Don't
Showing duplicate or redundant information: When the meaning of the target element is obvious, there is no need to use a tooltip. Information that duplicates its target element should not be shown in the tooltip.
Tooltip
Hover hint
Prompt box
Floating box
Information bubble