Bootstrap React 工具提示不適用於 p 或 span 標簽僅適用於按鈕？

Question

我想要 span 或 p 標簽上的工具提示，但對我來說，這只適用於 Button 標簽。 我正在使用插件 SortableTree 但這並不重要：

                <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={node.title}
                          id={`id${node}`}
                        >
                          <Button> 
                            {node.title} 
                          </Button>
                        </OverlayTrigger>
                      ),
                      id: "left-tree", 
                    };
                  }}
                />

在這里工作，但當設置..

                <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={node.title}
                          id={`id${node}`}
                        >
                          <span>  // OR <p> TAG NO WORK
                            {node.title} 
                          </>>
                        </OverlayTrigger>
                      ),
                      id: "left-tree", 
                    };
                  }}
                />

我該如何解決？

我希望 hover p 標簽顯示文本

我正在使用 React Bootstrap 工具提示 Overlay..

Answer 1

在 ReactBootstrap 文檔中，它記錄了如何自定義疊加觸發器

https://react-bootstrap.netlify.app/components/overlays/#customizing-trigger-behavior

在那里玩了一下，我發現您需要將ref和triggerHandler道具傳遞給您的 span 標簽。

render(
  <OverlayTrigger
    placement="bottom"
    overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
  >

// use ref and triggerHandler
    {({ ref, ...triggerHandler }) => (
        <span className="ms-1" ref={ref} {...triggerHandler}>Hover to see</span>
    )}
  </OverlayTrigger>,
);