Material ui 工具提示无法在移动设备上运行

Question

尝试将工具提示转换为依赖于 onClick 事件的受控组件这在移动和网络中工作正常，但它失去了在悬停时显示工具提示的原始行为是否有解决方案使工具提示在悬停和 onClick 上都工作

Answer 1

作为造型的一部分
想要举办touch活动mobile
想要举办hover活动desktop也可以

但由于移动设备的原因，很难使其正常工作hover。

enterTouchDelay默认值是0在移动设备上发挥作用700ms：

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

<Tooltip title="Some message" enterTouchDelay={0}>
  <Button>Some message</Button>
</Tooltip>

Answer 2

因此最终我们需要一个在悬停和单击时都有效的工具提示。

默认 Material-UI 工具提示在 Web 和移动设备上都可以正常工作。

<Tooltip title="Show Tooltip">
   <Button>Long press for 1s to show tooltip on mobile</Button>
</Tooltip>

在移动设备上长按会显示工具提示，但它也会打开当我们在网络上右键单击（ctrl + 单击 mac）时打开的对话框。所以它对用户体验不友好。

因此，通过不失去悬停功能来启用 onClick 对于网络和移动设备来说都是理想的选择。

  <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>

单击此处查看完整的代码片段。