Material ui tooltip is not working on mobile

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


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>

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.

    title="I am tooltip"
    onOpen={() => setShowTooltip(true)}
    onClose={() => setShowTooltip(false)}
      onClick={() => setShowTooltip(!showTooltip)}
      Hoverme to open Tooltip

Click here for complete code snippet.