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
3 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>
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>
For mobile, the click solution seems the best.
The docs provides one example with it,
<ClickAwayListener onClickAway={handleTooltipClose}>
<div>
<Tooltip
PopperProps={{
disablePortal: true,
}}
onClose={handleTooltipClose}
open={open}
disableFocusListener
disableHoverListener
disableTouchListener
title="Add"
>
<Button onClick={handleTooltipOpen}>Click</Button>
</Tooltip>
</div>
</ClickAwayListener>
Related