Tooltips

Tooltips contain information to help users understand actions or page elements. They are short, and triggered by a user hovering with their keyboard or mouse over a UI element. Tooltips Design Guidelines.

Edit the code below to see your changes live!

<Tooltip trigger={<Button>Hover</Button>} placement="right">
  Tooltip Content
</Tooltip>

<Tooltip trigger={<Button>Hover</Button>} placement="right">
  Tooltip Content
</Tooltip>

API

Tooltip

Prop Name	Type	Default	Description
`trigger` *	`ReactNode`		React Node that triggers the tooltip on hover.
`placement`	`auto` \| `auto-end` \| `auto-start` \| `bottom` \| `bottom-end` \| `bottom-start` \| `left` \| `left-end` \| `left-start` \| `right` \| `right-end` \| `right-start` \| `top` \| `top-end` \| `top-start`	`top`	Sets the position of the Tooltip.

Props ending with * are required

Examples

Anchor

Tooltips can wrap any Element. Tooltip will show on hover.

Span

Edit the code below to see your changes live!

<Flex alignItems="center">
  <Box marginRight="medium">
    <Tooltip trigger={<Button>Button</Button>} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>

  <Box marginRight="medium">
    <Tooltip trigger={<WarningIcon />} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>
  <Box marginRight="medium">
    <Tooltip trigger={<span>Span</span>} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>
</Flex>

<Flex alignItems="center">
  <Box marginRight="medium">
    <Tooltip trigger={<Button>Button</Button>} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>
  <Box marginRight="medium">
    <Tooltip trigger={<WarningIcon />} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>
  <Box marginRight="medium">
    <Tooltip trigger={<span>Span</span>} placement="right">
      Tooltip Content
    </Tooltip>
  </Box>
</Flex>

Placement

Tooltip can be anchored in different directions with the placement property. It will automatically find a position if there's not enough space in the chosen direction.

Edit the code below to see your changes live!

<Grid gridColumns="repeat(4, min-content)">
  <Tooltip trigger={<Button>Right</Button>} placement="right">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Top</Button>} placement="top">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Left</Button>} placement="left">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Bottom</Button>} placement="bottom">
    Tooltip Content
  </Tooltip>
</Grid>

<Grid gridColumns="repeat(4, min-content)">
  <Tooltip trigger={<Button>Right</Button>} placement="right">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Top</Button>} placement="top">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Left</Button>} placement="left">
    Tooltip Content
  </Tooltip>
  <Tooltip trigger={<Button>Bottom</Button>} placement="bottom">
    Tooltip Content
  </Tooltip>
</Grid>

Beta