As part of styling
Wanted to have touch event for mobile
Wanted to have hover event for desktop to also work

But had difficulty making it working due to hover for mobile.

Making enterTouchDelay value to 0 worked on mobile, 700ms is default value:

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

<Tooltip title="Some message" enterTouchDelay={0}>
  <Button>Some message</Button>
</Tooltip>

So ultimately we need a tooltip that works both on hover and onClick.

Default Material-UI tooltip works fine both on web and mobile.

<Tooltip title="Show Tooltip">
   <Button>Long press for 1s to show tooltip on mobile</Button>
</Tooltip>

Long-pressing on mobile shows tooltip but it also opens the dailog box which opens when we right-click(ctrl + click on mac) on web. So it is not UX friendly.

So enabling onClick by not loosing the hover functionality is ideal for both web and mobile devices.

  <Tooltip
    title="I am tooltip"
    open={showTooltip}
    onOpen={() => setShowTooltip(true)}
    onClose={() => setShowTooltip(false)}
  >
    <Button
      variant="outlined"
      color="primary"
      onClick={() => setShowTooltip(!showTooltip)}
    >
      Hoverme to open Tooltip
    </Button>
  </Tooltip>

Click here for complete code snippet.

For mobile, the click solution seems the best.

The docs provides one example with it,

      <ClickAwayListener onClickAway={handleTooltipClose}>
        <div>
          <Tooltip
            PopperProps={{
              disablePortal: true,
            }}
            onClose={handleTooltipClose}
            open={open}
            disableFocusListener
            disableHoverListener
            disableTouchListener
            title="Add"
          >
            <Button onClick={handleTooltipOpen}>Click</Button>
          </Tooltip>
        </div>
      </ClickAwayListener>

https://mui.com/components/tooltips/#triggers