在来自react-tooltip的工具提示中未呈现HTML

Question

我使用了工具提示表单react-tooltip，我想在工具提示里面放一些HTML标签。该如何管理呢？我在react-tooltip site中找不到任何信息。现在我创建工具提示：

const TooltipConst = props => {
if (props.tooltip && props.id) {
    const tooltip = <Tooltip id={props.id + 'Tooltip'}>
        <div> render(){props.tooltip} </div>
    </Tooltip>;
    return (
        <OverlayTrigger
            overlay={tooltip}
            placement="top"
            delayShow={500}
            delayHide={1000}
        >
            {props.children}
        </OverlayTrigger>
    );
}
return <div>{props.children}</div>;

}；

当作为工具提示传递一些带有HTML的字符串时，它们不会呈现。有什么建议吗？我也尝试将其作为对象，例如<span><p>some text</p> Some text </span>，但它返回的不是文本，而是类似于Object[]的工具提示。

Answer 1

如果你想在ReactTooltip中添加超文本标记，比如超文本标记按钮或者其他超文本标记。并且想要在点击时显示。

<div id={row.index} className="text-center">
     <a data-tip={'dummystring'} data-event={'click focus'}
      data-for={'tooltip'}>Show tooltip</a>
     <ReactTooltip id={'tooltip'} effect="solid"
           clickable={true} place="right"
           getContent={function() {
           return (
                <div>
                   <span>Some text</span>
                   <Button 
                   onClick={()=>alert('clicked')}>
                   Click Me </Button>
                </div>
          )
    }}/>
</div>

Answer 2

const tooltip = (<Tooltip id={props.id + 'Tooltip'}>
    <div> render(){props.tooltip} </div>
</Tooltip>);

这是他们的官方文档

此外，如果您想通过props呈现html，则应该使用dangerouslySetHTML =>，请参阅React文档

Answer 3

您可以使用react-tooltip库。将属性html={true}作为<ReactTooltip html={true} /> for more information refer this link传递给<ReactTooltip />