I was able to pass Material-UI's IconButton inside Material-UI's Tooltip title.

All the views are working properly, except I cannot press the button.

I want to add a Close button to make the tooltip close on clicking the close button, but I cannot do that. Is there a way to do this? If yes, please provide a solution to this.

I was able to pass Material-UI's IconButton inside Material-UI's Tooltip title.

All the views are working properly, except I cannot press the button.

I want to add a Close button to make the tooltip close on clicking the close button, but I cannot do that. Is there a way to do this? If yes, please provide a solution to this.

• javascript
• reactjs
• material-ui
• frontend
• tooltip

Share Improve this question Follow edited Oct 10, 2020 at 1:04 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Aug 18, 2020 at 19:58 taehoon719taehoon719 17133 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

In case someone looking for this, here are some useful snippet for it.

import * as React from 'react';
import {Tooltip, Typography} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'


export const TooltipWithIcon = (title, message) => {
   const [open, setOpen] = useState(false)
   
   const handleClose = e => {
    if (open) {
      setOpen(false)
    }
    return null
  }

  return(
    <Tooltip
        open={open}
        title={
          <>
            <CloseIcon sx={{ float: 'right' }} onClick={e => handleClose(e)}></CloseIcon>
            <Typography variant="h6" sx={{ fontWeight: 700 }}>
              {title}
            </Typography>
            <Typography variant="body1" sx={{ fontSize: 14 }}>
              {message}
            </Typography>
          </>
        }
      >
      </Tooltip>
  )

}

MUI's Tooltip has pointer-events set to none by default, so you need to enable this. Add a class to your tooltip and then add this to the css:

  pointer-events: auto;

I solved it by using Popper from Material-UI.