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