Material UI Tooltip移动端不生效，如何实现同时支持hover与点击触发？

核心实现思路 #

同时监听hover、click两类事件，共用同一套显隐状态，通过状态标记解决两类事件的逻辑冲突，移动端自动降级为纯点击触发，避免触摸设备模拟hover带来的异常。

具体实现步骤 #

• 维护统一的显隐状态：用单个状态变量（比如isTooltipOpen）控制Tooltip的显示隐藏，不要分开维护hover和click的独立状态，避免状态不同步
• 绑定hover相关事件：在触发元素上注册onMouseEnter、onMouseLeave事件，鼠标进入时设置isTooltipOpen = true，鼠标移出且当前不是点击锁定状态时设置为false
• 新增点击逻辑：绑定onClick事件，点击时切换显隐状态，同时新增isLockedByClick标记变量，点击打开时将标记设为true，避免鼠标移出后Tooltip自动关闭，只有再次点击触发元素、或者点击页面其他空白区域时，才重置标记并关闭Tooltip
• 全局点击关闭逻辑：在document上绑定点击事件，当点击区域不在触发元素和Tooltip内部时，关闭Tooltip同时重置点击锁定标记
• 移动端兼容：检测到当前为触摸设备时，自动禁用hover事件逻辑，仅保留点击触发能力

代码示例（React版本） #

import { useState, useRef, useEffect } from 'react';

const DualTriggerTooltip = ({ content, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isClickLocked, setIsClickLocked] = useState(false);
  const triggerRef = useRef(null);
  const tooltipRef = useRef(null);

  // Hover触发逻辑
  const handleMouseEnter = () => {
    if (!isClickLocked) setIsOpen(true);
  };
  const handleMouseLeave = () => {
    if (!isClickLocked) setIsOpen(false);
  };

  // 点击触发逻辑
  const handleTriggerClick = (e) => {
    e.stopPropagation();
    setIsClickLocked(!isClickLocked);
    setIsOpen(!isOpen);
  };

  // 全局点击关闭逻辑
  useEffect(() => {
    const handleGlobalClick = (e) => {
      if (
        triggerRef.current && !triggerRef.current.contains(e.target) &&
        tooltipRef.current && !tooltipRef.current.contains(e.target)
      ) {
        setIsOpen(false);
        setIsClickLocked(false);
      }
    };
    document.addEventListener('click', handleGlobalClick);
    return () => document.removeEventListener('click', handleGlobalClick);
  }, []);

  return (
    <div className="tooltip-wrapper">
      <div
        ref={triggerRef}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onClick={handleTriggerClick}
        className="tooltip-trigger"
      >
        {children}
      </div>
      {isOpen && (
        <div ref={tooltipRef} className="tooltip-content">
          {content}
        </div>
      )}
    </div>
  );
};

补充说明 #

如果使用主流第三方UI库的Tooltip组件，大部分都支持直接配置trigger属性为['hover', 'click']一键开启双触发模式，不需要手动重写底层逻辑。

内容的提问来源于stack exchange，提问作者Vamsi Krishna