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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With