Material ui 工具提示不適用於移動設備

Question

嘗試將工具提示轉換為依賴於 onClick 事件的受控組件這在移動設備和 web 中工作正常但它失去了在 hover 上顯示工具提示的原始行為是否有使工具提示在 hover 和 onClick 上工作的解決方案

Answer 1

對於移動設備，點擊解決方案似乎是最好的。

該文檔提供了一個示例，

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

https://mui.com/components/tooltips/#triggers

Answer 2

所以最終我們需要一個既適用於懸停又適用於點擊的工具提示。

默認 Material-UI 工具提示在 Web 和移動設備上都可以正常工作。

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

在移動設備上長按會顯示工具提示，但也會打開 dailog 框，當我們在網絡上右鍵單擊（ctrl + 單擊 mac）時會打開該對話框。 所以它不是用戶體驗友好的。

因此，通過不失去懸停功能來啟用 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>

單擊此處獲取完整的代碼片段。

Answer 3

作為造型的一部分
想要為mobile提供touch事件
希望desktop hover事件也能工作

但是由於hover移動而難以使其工作。

在移動設備enterTouchDelay值設為0 ，默認值為700ms ：

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

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