G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
Layouts
ArrangeBoxFlexStack
Foundational
FieldMenuTextboxVariables
Utilities
CardHooksStyle utilities
Patterns
CardsFormsLists and tablesModals
Guides
ResponsiveTheming
Showcase
CompositionsLayoutsLayout examplesTests

Tooltip

Trigger


    <Tooltip
      content="Add to favorites"
    >
      <IconButton icon={<IconHeart />}/>
    </Tooltip>

Placement


    <Tooltip
      placement="right"
      content="Share"
    >
      <IconButton icon={<IconShare />}/>
    </Tooltip>

Demo

topStart
top
topEnd
leftStart
Trigger
rightStart
left
right
leftEnd
rightEnd
bottomStart
bottom
bottomEnd

Offset


    <Arrange gap="s">
      <Tooltip
        offset="xs"
        content="Download"
      >
        <IconButton icon={<IconDownload />}/>
      </Tooltip>
      <Tooltip
        offset="s"
        content="Download"
      >
        <IconButton icon={<IconDownload />}/>
      </Tooltip>
    </Arrange>

Placement method

With placementMethod="static" the tooltip uses CSS instead of JavaScript to position itself.


    <Arrange gap="m">
      <Tooltip
        placementMethod="static"
        content="Share"
      >
        <IconButton icon={<IconShare />}/>
      </Tooltip>
      <Tooltip
        placementMethod="dynamic"
        content="Share"
      >
        <IconButton icon={<IconShare />}/>
      </Tooltip>
    </Arrange>

Tooltip.Content


    <Tooltip.Content>
      Content
    </Tooltip.Content>

Props

Name
Type
Default
placement
oneOf
'top' 'topStart' 'topEnd' 'bottom' 'bottomStart' 'bottomEnd' 'right' 'rightStart' 'rightEnd' 'left' 'leftStart' 'leftEnd'
'top'
zIndex
oneOfType
number
string
1400
hasPortal
bool
true
placementMethod
oneOf
'static' 'dynamic'
'dynamic'
offset
oneOf
'xs' 's'
'xs'
content
node