Material ui tooltip is not working on mobile

Question

Tried converting Tooltip to a controlled component which depends on onClick event This works fine in mobile and web but it looses it's original behaviour to show Tooltip on hover Is there a solution that makes Tooltip work both on hover and onClick

Answer 1

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>

Answer 2

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.