Bootstrap React tooltip not working with p or span tag only work with button?

Question

I want a tooltip on the span or p tag but to me this only works on the Button tag. I am using plugin SortableTree but that is not important more:

                <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", 
                    };
                  }}
                />

Here work but when set..

                <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", 
                    };
                  }}
                />

how do i fix this?

I want the hover p tag to show me the text

I am using React Bootstrap tooltip Overlay..

Answer 1

In ReactBootstrap docs it has documented how to customize overlaytrigger

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

Playing a bit there i founded out that you would need to pass ref and triggerHandler props to your span tag.

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>,
);