CODEWITHSUNDEEP
reactjsmaterial-ui
Thomes
Thomes

Reputation: 59

MUI two tooltips on one component

I want to display two tooltips on a button. However, I can't find any way to do it without errors in the console.

My goal:

enter image description here

Minimal reproducible example

import * as React from 'react';
import { Tooltip, Button, Box } from '@mui/material';

export default function BasicTooltip() {
  return (
    <Box sx={{ margin: 10 }}>
      <Tooltip title="Tooltip on top" placement="top">
        <Tooltip title="Tooltip on button" placement="bottom">
          <Button>Hello</Button>
        </Tooltip>
      </Tooltip>
    </Box>
  );
}

Error I'm getting in the console with this code:

MUI: You have provided a title prop to the child of Tooltip. Remove this title prop Tooltip on button or the Tooltip component.

Link to stackblitz: https://stackblitz.com/edit/react-qgtibd?file=demo.js

I already tried to isolate the inner tooltip with button in another component like this, but it did not work:

import * as React from 'react';
import { Tooltip, Button, Box } from '@mui/material';

const MyButton = React.forwardRef(({ tooltipText }, ref) => (
  <Tooltip title={tooltipText} placement="bottom">
    <Button ref={ref}>Hello</Button>
  </Tooltip>
));

export default function BasicTooltip() {
  return (
    <Box sx={{ margin: 10 }}>
      <Tooltip title="Tooltip on top" placement="top">
        <MyButton tooltipText="Tooltip on bottom" />
      </Tooltip>
    </Box>
  );
}

edit: I also can't put a div nor React.fragment between those tooltips, because it completely screws up the layout in my real case scenario.

Upvotes: 2

Views: 1893

Answers (1)

Lala
Lala

Reputation: 154

Looks like you need to isolate the tooltips from one another

<Box sx={{ margin: 10 }}>
  <Tooltip title="Tooltip on top" placement="top">
    <Box>
      <Tooltip title="Tooltip on button" placement="bottom">
        <Button>Hello</Button>
      </Tooltip>
    </Box>
  </Tooltip>
</Box>

modified stackblitz with the aligment

Upvotes: 3

Related Questions