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

Answer

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.