如何在React-Bootstrap中手动触发Tooltip？

你之前的代码问题在于，手动触发模式下，OverlayTrigger的show属性不能直接写死true——这个属性需要是受控状态，得用React的状态来动态控制，这样才能像jQuery那样手动调用显示/隐藏。

下面是完整的实现方案，完全对应你想要的jQuery效果：

首先导入需要的组件：

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

然后编写组件逻辑：

function ManualTooltipDemo() {
  // 用状态管理Tooltip的显示/隐藏
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
  // 可以加个状态动态控制Tooltip内容，对应你jQuery里的error.message
  const [tooltipContent, setTooltipContent] = useState('');

  // 手动显示Tooltip的方法，对应jQuery的$('.popover').popover('show')
  const showTooltip = () => {
    // 这里可以动态设置内容，比如模拟错误场景
    setTooltipContent('这是动态更新的提示内容！');
    setIsTooltipVisible(true);
  };

  // 手动隐藏Tooltip的方法
  const hideTooltip = () => {
    setIsTooltipVisible(false);
  };

  // 定义Tooltip组件
  const customTooltip = (
    <Tooltip id="manual-tooltip">
      <strong>Holy guacamole!</strong> {tooltipContent}
    </Tooltip>
  );

  return (
    <div className="d-flex align-items-center gap-3">
      <OverlayTrigger
        placement="left"
        overlay={customTooltip}
        trigger="manual" // 开启手动触发模式，禁用默认的hover/click触发
        show={isTooltipVisible} // 绑定状态到show属性，控制显示
        onToggle={setIsTooltipVisible} // 可选，处理组件内部的切换事件
      >
        <input placeholder="输入框" className="form-control" />
      </OverlayTrigger>

      {/* 手动控制按钮 */}
      <Button onClick={showTooltip}>显示提示</Button>
      <Button variant="secondary" onClick={hideTooltip}>隐藏提示</Button>
    </div>
  );
}

export default ManualTooltipDemo;

关键要点说明： #

• 受控状态：手动模式下，OverlayTrigger不会自动处理显示逻辑，完全依赖你传入的show状态变量。你需要通过useState创建状态，并用setIsTooltipVisible来切换状态，从而控制Tooltip的显示/隐藏。
• 动态内容：如果需要像jQuery那样动态更新Tooltip的内容（比如显示错误信息），可以把内容放到状态里（比如tooltipContent），在需要的时候更新状态即可。
• trigger="manual"：这个属性会禁用所有默认的触发方式（hover、click等），确保Tooltip只会在你手动改变状态时显示。

这样写就完全实现了你想要的、类似jQuery手动控制popover的效果——通过方法调用（这里是点击按钮触发状态变化）来显示/隐藏，还能动态更新内容。

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