2

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.

3 Answers 3

3

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

}
2

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;
0

I solved it by using Popper from Material-UI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.