React-Bootstrap关闭Modal后OverlayTrigger的Tooltip异常显示求助

问题描述 #

使用React-Bootstrap时，带有Tooltip的按钮点击打开Modal，关闭Modal后Tooltip会立即显示，仿佛鼠标仍悬停在按钮上。预期关闭Modal后Tooltip仅在鼠标主动悬停按钮时才展示。

核心原因 #

• 点击按钮打开Modal时，鼠标实际仍处于按钮的悬停状态
• Modal关闭后，OverlayTrigger的悬停检测逻辑未被正确重置
• 配置的delay={{ hide: 0 }}让Tooltip无需延迟直接显示，加剧了该异常

解决方案 #

方法1：手动控制Tooltip显示状态（最可控） #

通过useState管理Tooltip的显示状态，在Modal打开/关闭时强制重置Tooltip，同时限制仅当Modal未显示时才触发悬停显示：

import React, { useState } from 'react';
import { OverlayTrigger, Tooltip, Button, Modal } from 'react-bootstrap';

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const [showTooltip, setShowTooltip] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
    setShowTooltip(false); // 打开Modal时立即隐藏Tooltip
  };

  const handleCloseModal = () => {
    setShowModal(false);
    setShowTooltip(false); // 关闭Modal时确保Tooltip隐藏
  };

  return (
    <div>
      <OverlayTrigger
        overlay={<Tooltip>My Tooltip</Tooltip>}
        delay={{ show: 250, hide: 0 }}
        trigger="hover"
        show={showTooltip}
        onMouseEnter={() => !showModal && setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <Button onClick={handleOpenModal}>Open Modal</Button>
      </OverlayTrigger>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* Modal Content */}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default MyComponent;

方法2：条件禁用Tooltip（最简洁） #

当Modal显示时，让OverlayTrigger不渲染Tooltip，从根源避免异常触发：

import React, { useState } from 'react';
import { OverlayTrigger, Tooltip, Button, Modal } from 'react-bootstrap';

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <OverlayTrigger
        overlay={showModal ? null : <Tooltip>My Tooltip</Tooltip>}
        delay={{ show: 250, hide: 0 }}
      >
        <Button onClick={handleOpenModal}>Open Modal</Button>
      </OverlayTrigger>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* Modal Content */}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default MyComponent;

方法3：模拟鼠标离开事件（最小改动） #

利用Modal的onExited事件（Modal完全关闭后触发），给按钮发送鼠标离开事件，强制重置OverlayTrigger的悬停状态：

import React, { useState, useRef } from 'react';
import { OverlayTrigger, Tooltip, Button, Modal } from 'react-bootstrap';

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const buttonRef = useRef(null);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleModalExited = () => {
    // 模拟鼠标离开按钮，触发Tooltip隐藏逻辑
    buttonRef.current?.dispatchEvent(new MouseEvent('mouseleave'));
  };

  return (
    <div>
      <OverlayTrigger
        overlay={<Tooltip>My Tooltip</Tooltip>}
        delay={{ show: 250, hide: 0 }}
      >
        <Button ref={buttonRef} onClick={handleOpenModal}>Open Modal</Button>
      </OverlayTrigger>

      <Modal show={showModal} onHide={handleCloseModal} onExited={handleModalExited}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* Modal Content */}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default MyComponent;

方案选择建议 #

• 方法1适合需要精细控制Tooltip显示逻辑的复杂场景
• 方法2代码改动最少，适合快速修复简单场景
• 方法3无需修改OverlayTrigger内部状态，适合不想改动原有逻辑的情况

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