React Bootstrap的Tooltip仅Button生效，给p/span加提示不生效如何解决？

问题根因 #

React Bootstrap 的 OverlayTrigger 需要子元素接收并绑定其注入的鼠标事件监听与ref引用才能正常触发提示。自带的Button组件已经内置了这些属性的兼容处理，而原生span/p标签要么因为默认行内元素属性无法正确响应事件，要么没有满足组件的交互要求，所以会出现失效问题。

解决方案 #

方案1（推荐，改造成本最低） #

使用Button组件的as属性指定渲染标签，既保留内置的事件兼容能力，又可以渲染为你需要的span/p标签，再覆盖默认按钮样式即可：

<SortableTree
  nodeContentRenderer={NodeRenderer}
  treeData={treeDataFirst}
  onMoveNode={() => this.test()}
  onChange={(treeDataFirst) =>
    this.setState({ treeDataFirst })
  }
  isVirtualized={false}
  canDrag={false}
  generateNodeProps={({ node, path }) => {
    return {
      title: (
        <OverlayTrigger
          placement="right"
          overlay={<Tooltip id={`id${node}`}>{node.title}</Tooltip>}
          id={`id${node}`}
        >
          {/* as属性指定渲染为span，样式类用于清除Button默认样式 */}
          <Button as="span" variant="link" className="p-0 border-0 bg-transparent text-inherit">
            {node.title}
          </Button>
        </OverlayTrigger>
      ),
      id: "left-tree",
    };
  }}
/>

你可以根据业务需求调整样式类，让最终渲染的span和原生标签表现完全一致。

方案2（原生标签适配） #

如果要直接使用原生span/p标签，需要给标签添加tabIndex属性确保可交互，同时设置指针事件和显示属性，保证事件能被正常捕获：

<OverlayTrigger
  placement="right"
  overlay={<Tooltip id={`id${node}`}>{node.title}</Tooltip>}
  id={`id${node}`}
>
  <span 
    tabIndex={0} 
    style={{ pointerEvents: 'auto', display: 'inline-block' }}
  >
    {node.title}
  </span>
</OverlayTrigger>

注意：OverlayTrigger的overlay属性要求传入组件实例，官方规范必须用<Tooltip>包裹提示内容，不要直接传入字符串，否则部分版本会出现兼容问题。

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