Tooltip

Trigger

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

Placement

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

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>
  

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