React中Bootstrap Tooltip父元素移除后未隐藏问题

这个问题本质是Bootstrap Tooltip的DOM渲染逻辑和React的DOM管理机制不兼容导致的——Bootstrap Tooltip默认会把提示框元素挂载到<body>标签下，而非目标元素的父节点内部。所以当你用jQuery直接删除<tr>时，Tooltip的实例并没有被销毁，它对应的DOM元素还留在页面上，自然不会跟着父元素一起消失。

这里有两种实用的解决思路：

1. 基于现有jQuery代码的快速修复 #

在删除父元素<tr>之前，先手动销毁该行内所有的Tooltip实例。Bootstrap提供了tooltip('dispose')方法，可以彻底清理Tooltip的DOM节点和绑定的事件：

$("table#bootstrap_git_demo").on("click", ".remove", function() {
  // 先找到当前行内所有启用Tooltip的元素，销毁Tooltip实例
  $(this).closest('tr').find('[data-bs-toggle="tooltip"]').tooltip('dispose');
  // 再执行删除行的操作
  $(this).closest('tr').remove();
});

这样就能确保在删除表格行之前，把关联的Tooltip完全清理干净，不会留下残留。

2. 更适配React生态的优化方案 #

既然是React应用，更推荐使用官方维护的react-bootstrap库来实现Tooltip功能。它完全遵循React的组件生命周期，当组件（比如你的表格行）被卸载时，Tooltip会自动被清理，不需要手动操作DOM。

举个简单的实现示例：
首先安装依赖：

npm install react-bootstrap bootstrap

然后在组件中使用：

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

// 定义Tooltip内容组件
const RenderTooltip = (props) => (
  <Tooltip id="row-tooltip" {...props}>
    这是提示内容
  </Tooltip>
);

// 表格行组件
const TableRow = ({ onRemove }) => (
  <tr>
    <td>
      <OverlayTrigger
        placement="top"
        delay={{ show: 250, hide: 400 }}
        overlay={<RenderTooltip />}
      >
        <Button variant="secondary">Hover查看提示</Button>
      </OverlayTrigger>
    </td>
    <td>
      <Button variant="danger" onClick={onRemove}>删除行</Button>
    </td>
  </tr>
);

// 父组件管理表格数据
const MyTable = () => {
  const [rows, setRows] = useState([/* 初始表格数据 */]);
  
  const handleRemoveRow = (index) => {
    setRows(prevRows => prevRows.filter((_, i) => i !== index));
  };
  
  return (
    <table className="table">
      <tbody>
        {rows.map((row, index) => (
          <TableRow 
            key={index} 
            onRemove={() => handleRemoveRow(index)} 
          />
        ))}
      </tbody>
    </table>
  );
};

这种方式完全依托React的状态管理和组件生命周期，不需要依赖jQuery操作DOM，从根源上避免了Tooltip残留的问题。

内容的提问来源于stack exchange，提问作者Ashwin.Rajagopal