desktop_windows_roundWeb
phone_iphone_roundMobile

COMPONENTS

Overview
Avatar
Badge
Breadcrumb
Buttons
Calendar
Cards
Checkbox
Chips
Date pickers
Dividers
Dropdowns
Help text
Icon
Inline editable fields
Inputs
Link
Messages
Meta list
Modals
Navigation - Horizontal
Navigation - Vertical
Page headers
Pagination
Pill
Popover
Progress indicators
Radio
Rich text editor
Sidesheet
Sliders
Status hint
Stepper
Switch
Tables
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