MUI为TextField标签添加Tooltip时出现双弹窗问题求助

核心问题是手动控制Tooltip显示状态时，没有禁用其自带的hover/touch触发逻辑，导致两种触发机制同时生效，在触屏设备上触发重复弹窗。可以通过以下方式解决：

• 给Tooltip组件添加disableHoverListener和disableTouchListener属性，禁用默认触发行为，确保只有手动绑定的事件能控制弹窗显示
• 统一通过自定义事件（触屏/点击）控制Tooltip的open状态，避免逻辑冲突

修改后的示例代码：

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";

export default function App() {
  const [tooltipOpen, setTooltipOpen] = useState(false);

  const handleLabelTouchStart = () => {
    setTooltipOpen(true);
  };

  const handleLabelTouchEnd = () => {
    setTimeout(() => setTooltipOpen(false), 1500);
  };

  return (
    <div className="App">
      <TextField
        label={
          <Tooltip
            title="这是输入框的提示信息"
            open={tooltipOpen}
            disableHoverListener
            disableTouchListener
            onClose={() => setTooltipOpen(false)}
          >
            <span
              onTouchStart={handleLabelTouchStart}
              onTouchEnd={handleLabelTouchEnd}
              onClick={() => setTooltipOpen(!tooltipOpen)}
            >
              用户名
            </span>
          </Tooltip>
        }
        variant="outlined"
        margin="normal"
      />
    </div>
  );
}

如果问题仍存在，可考虑完全自定义label组件：用普通span/div包裹Tooltip，通过CSS调整样式匹配TextField的label样式，彻底脱离组件默认的label触发逻辑，实现更精准的控制。

内容的提问来源于stack exchange，提问作者Nguyễn Khánh Nguyễn