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

$nowrap

Should the tooltip be displayed only when the direct child element overflows, e.g. when text is truncated.

$showOnOverflow

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>
)

tooltipPositions

() => {
  const [width, setWidth] = useState(200);

  const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

  return (
    <>
      <Box overflow="hidden" width={width}>
        <Tooltip text={text} $showOnOverflow>
          <Typography truncate={2} $nowrap>
            {text}
          </Typography>
        </Tooltip>
      </Box>

      <Button onClick={() => setWidth(width === 200 ? 400 : 200)}>Toggle size</Button>
    </>
  );
}

The \`$showOnOverflow\` prop can be used to show the tooltip only when the element content is overflowing or contains truncated text.


Tooltip component

tooltip Positions

Show On Overflow

Name	Description	Default
$nowrap	Should the content ignore line breaks	-
$showOnOverflow	Should the tooltip be displayed only when the direct child element overflows, e.g. when text is truncated.	-
maxWidth	Tooltip content max width	-
offset	Offset between element and tooltip (px)	-
placement	Tooltip placement	-
text	Tooltip text	-