Tooltips
Simple text prompt balloon
Anatomy
Trigger condition: Developer sells
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.
3. Close icon
Optional, default is off
3
Type/Variant
Usage scenario
Interaction
Tips Information
Trigger condition: Developer sells
Supplement
App-side interaction is divided into default display requiring manual closure, and default display for 3 to 5 seconds before closing. Clicking on any other area can also close it.
Minimize the use of tooltips on mobile devices and choose bottom sheets instead for better adaptation.
Label
Multilingual
Tips Information
Trigger condition: Developer
sells
Maximum width: 70%-80% of screen width,
Auto wrap
RTL
Trigger condition:
LTR
Tooltips, information, tips, info
Tips, info, tips, tips in
RTL
Usage
TooltipTooltipTooltipTooltip
Tips Information
Do
Tips Information
Don't
Keep App copy as short as possible. For scenarios explaining multiple pieces of copy, please use BottomSheet.
Tooltip
Hover hint
Prompt box
Floating box
Information bubble