react-bootstrap：禁用按钮Tooltip带链接，如何阻止其自动隐藏？

禁用按钮本身无法触发鼠标事件，且默认OverlayTrigger的hover逻辑无法处理「鼠标从按钮移到Tooltip」的场景，导致Tooltip会提前隐藏，无法点击内部链接。可以通过手动控制Tooltip的显示状态来解决，具体实现如下：

import { useState, useRef } from 'react';
import { Button, Overlay, Tooltip } from 'react-bootstrap';

function DisabledButtonWithClickableTooltip() {
  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
  const tooltipRef = useRef(null);
  const hideTimeoutRef = useRef(null);

  // 触发Tooltip显示，同时清除可能存在的隐藏定时器
  const handleMouseEnter = () => {
    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
    setIsTooltipOpen(true);
  };

  // 鼠标离开按钮时，延迟300ms隐藏Tooltip（给用户移动到Tooltip的时间）
  const handleMouseLeave = () => {
    hideTimeoutRef.current = setTimeout(() => {
      setIsTooltipOpen(false);
    }, 300);
  };

  // 鼠标移入Tooltip时，取消隐藏定时器，保持Tooltip显示
  const handleTooltipMouseEnter = () => {
    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
  };

  // 鼠标移出Tooltip时，直接隐藏
  const handleTooltipMouseLeave = () => {
    setIsTooltipOpen(false);
  };

  return (
    <div 
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ display: 'inline-block' }}
    >
      {/* 禁用按钮设置pointerEvents: none，让外层容器接收鼠标事件 */}
      <Button disabled style={{ pointerEvents: 'none' }}>
        I am a button
      </Button>
      <Overlay
        show={isTooltipOpen}
        target={tooltipRef.current}
        placement="bottom"
        container={tooltipRef.current}
      >
        <Tooltip 
          onMouseEnter={handleTooltipMouseEnter}
          onMouseLeave={handleTooltipMouseLeave}
        >
          Click <a href="/billing">here</a>
        </Tooltip>
      </Overlay>
    </div>
  );
}

export default DisabledButtonWithClickableTooltip;

关键细节说明 #

• 用外层div接收鼠标事件：禁用按钮默认无法触发mouseenter/mouseleave，所以给按钮设置pointerEvents: none，让外层容器接管鼠标交互。
• 定时器控制隐藏逻辑：鼠标离开按钮时不直接隐藏Tooltip，而是设置短延迟；如果用户在延迟内将鼠标移入Tooltip，就清除定时器，保持Tooltip显示。
• 替换OverlayTrigger为Overlay：通过show属性手动控制Tooltip的显示状态，获得比OverlayTrigger更灵活的控制权。

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