Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 670
Vamsi Krishna Avatar asked Sep 03 '25 05:09

Vamsi Krishna


2 Answers

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>
like image 85
Manohar Reddy Poreddy Avatar answered Sep 04 '25 21:09

Manohar Reddy Poreddy


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.

like image 37
Anjan Talatam Avatar answered Sep 04 '25 20:09

Anjan Talatam