材料用户界面工具提示在移动设备上不起作用 [英] Material ui tooltip is not working on mobile

问题描述

已尝试将工具提示转换为依赖于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.

这篇关于材料用户界面工具提示在移动设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！