Tooltips display informative text when users hover over, focus on, or tap an element.

$nowrap

maxWidth

offset

placement

text

() => (
  <Tooltip text="Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint." placement="top">
    <Button>Hover on me</Button>
  </Tooltip>
)

Tooltip

() => (
  <Box display="flex">
    <Box ml={12} mr={12}>
      <Tooltip text="Tooltip" placement="left">
        <Box>Left</Box>
      </Tooltip>
    </Box>
    <Box ml={12} mr={12}>
      <Tooltip text="Tooltip" placement="right">
        <Box>Right</Box>
      </Tooltip>
    </Box>
    <Box ml={12} mr={12}>
      <Tooltip text="Tooltip" placement="top">
        <Box>Top</Box>
      </Tooltip>
    </Box>
    <Box ml={12} mr={12}>
      <Tooltip text="Tooltip" placement="bottom">
        <Box>Bottom</Box>
      </Tooltip>
    </Box>
    <Box ml={12} mr={12}>
      <Tooltip text="Tooltip" placement="bottom-end">
        <Box>Bottom Right</Box>
      </Tooltip>
    </Box>
  </Box>
)

Name	Description	Default
$nowrap	Should the content ignore line breaks	-
maxWidth	Tooltip content max width	-
offset	Offset between element and tooltip (px)	-
placement	Tooltip placement	-
text	Tooltip text	-

Tooltip component

tooltip Positions