How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogTooltip
Tooltip is an information component. Tooltips serve as onboarding elements.
Tooltip can contain arrows with any direction: top, bottom, left, or right. It can go with or without title.
You can edit the configuration: body offset, tip offset, width, and height.
Important: The content is wrapped by default.
You can only use the available tokens in the design—editing is disabled.
Basic parameters
Behaviour
/w=3840,quality=90,fit=scale-down)
Place the tooltip arrow in any position required by design: not only in the center but also with an offset. The tooltip may have different content widths.
/w=3840,quality=90,fit=scale-down)
If the tooltip arrow points to an icon in the very corner of the screen, we recommend that you use this type of arrow. The arrow is located in the same corner of the tooltip and allows you to point to the object accurately.
/w=3840,quality=90,fit=scale-down)
Tooltip can contain Button low.
Specs
Min component width: wrap content Min height: 56 px Max width: 328 px
Recommended max length: Title: 60 characters Body: 160 characters Both title and body text can be transferred to the second line.
The space between the object and the tooltip should be 8 px.
↓ Bottom arrow
/w=3840,quality=90,fit=scale-down)
→ Right arrow
↑ Top arrow
←Left arrow
On this page
