[英]Bootstrap React tooltip not working with p or span tag only work with button?
I want a tooltip on the span or p tag but to me this only works on the Button tag.我想要 span 或 p 标签上的工具提示,但对我来说,这只适用于 Button 标签。 I am using plugin SortableTree but that is not important more:我正在使用插件 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",
};
}}
/>
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我希望 hover p 标签显示文本
I am using React Bootstrap tooltip Overlay..我正在使用 React Bootstrap 工具提示 Overlay..
In ReactBootstrap docs it has documented how to customize overlaytrigger在 ReactBootstrap 文档中,它记录了如何自定义叠加触发器
https://react-bootstrap.netlify.app/components/overlays/#customizing-trigger-behavior 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.在那里玩了一下,我发现您需要将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>,
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.