Intenté convertir Tooltip en un componente controlado que depende del evento onClick. Esto funciona bien en dispositivos móviles y web, pero pierde su comportamiento original para mostrar Tooltip al pasar el mouse. ¿Hay alguna solución que haga que Tooltip funcione tanto al pasar el mouse como al hacer clic?
como parte del estilismo
Quería tener un evento touch para mobile
Quería tener un evento hover para desktop para que también funcione
Pero tuve dificultades para hacerlo funcionar debido al hover para dispositivos móviles.
Hacer que el valor de enterTouchDelay sea 0 funcionó en dispositivos móviles, 700ms es el valor predeterminado:
import Tooltip from '@mui/material/Tooltip'; import Button from '@mui/material/Button'; <Tooltip title="Some message" enterTouchDelay={0}> <Button>Some message</Button> </Tooltip>Entonces, en última instancia, necesitamos una información sobre herramientas que funcione tanto al pasar el mouse como al hacer clic.
La información sobre herramientas predeterminada de Material-UI funciona bien tanto en la web como en dispositivos móviles.
<Tooltip title="Show Tooltip"> <Button>Long press for 1s to show tooltip on mobile</Button> </Tooltip>Al presionar prolongadamente en el dispositivo móvil, se muestra información sobre herramientas, pero también se abre el cuadro de diálogo que se abre cuando hacemos clic derecho (ctrl + clic en mac) en la web. Por lo tanto, no es compatible con UX.
Por lo tanto, habilitar onClick sin perder la funcionalidad de desplazamiento es ideal tanto para la web como para dispositivos móviles.
<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>Para dispositivos móviles, la solución de clic parece la mejor.
Los documentos proporcionan un ejemplo con él,
<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>