材料用户界面工具提示在移动设备上不起作用

已尝试将工具提示转换为依赖于onClick事件的受控组件 这在移动和网络上运行得很好，但它失去了在悬停时显示工具提示的原始行为 是否有解决方案可以使工具提示在鼠标悬停和点击时均可使用

---

解决方案

因此，我们最终需要一个在悬停和单击时都可以使用的工具提示。

默认材料-用户界面工具提示在Web和移动设备上都运行良好。

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

在移动设备上长按会显示工具提示，但它也会打开日志框，当我们在Web上右击(在Mac上按住Ctrl键的同时单击)时会打开该对话框。所以它对用户界面不友好。

因此，在不丢失悬停功能的情况下启用onClick是Web和移动设备的理想选择。

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