desktop_windows
Web
phone_iphone
Mobile

COMPONENTS

Overview
AI
keyboard_arrow_down
Avatar
Avatar Group
Badge
Breadcrumb
Button
Calendar
Cards
Checkbox
Chips
Combobox
Date Pickers
Dividers
Dropdowns
Empty state
Help Text
Icon
Inline Editable Fields
Interactive Cards
Inputs
Key Value Pair
Link
Link Button
Listbox
Menu
Messages
Meta List
Modals
Navigation - Horizontal
Navigation - Vertical
Page Headers
Pagination
Pill
Popover
Progress Indicators
Radio
Rich Text Editor
Select
Sidesheet
Sliders
Status Hint
Stepper
Switch
Table
Tabs
Time Picker
Toast
Tooltip

Tooltip

Tooltip is used to display content in relation to a target when that target is hovered.

Usage
Code
Interactions

Structure



Structure of tooltip
PropertyValue(s)

Padding


(top, right, bottom, left)		4 px, 8 px, 4 px, 8 px
Spacing from trigger4 px
Maximum width256 px

Configurations

PropertyValue(s)Default value
Position
  • Top
  • Right
  • Bottom
  • Left
Bottom

Usage


Positioning


Default Position

The preferred and default side of tooltip is the bottom of the trigger.

Default position Default position

Tooltip Overflow

Tooltips should be as concise and clear as possible. Exceeding the max width will make it wrap to form another line.

Tooltip overflow Tooltip overflow

Tooltip vs Popover

Tooltip is used to display concise information in relation to a target whereas popover is an overlay container used for displaying links, interactive elements, avatars, text formatting (bullets etc), meta data.

Tooltip vs Popover Tooltip vs Popover

Avoid Errors in Tooltips

Tooltip should not be used to provide essential information and collective feedback like errors, warnings, etc that require the immediate attention of the users.



Was this page helpful?

CONTENTS