Question

我正在尝试在react-tooltip中设置一个链接，而不是取回一个链接，[Object object]将回到工具提示中。我正在使用的格式是将链接设置为data-tip，如下所示：

<div data-place="right" data-type="dark" data-effect="solid" data-multiline="false" data-class="nav-tooltip" data-tip={link} delayHide={1000}>
   <div>view</div>
 </div>
 <ReactTooltip />

我很困惑为什么这不起作用。我尝试过字符串插值而没有运气。

Answer 1

您可以尝试在ReactTooltip上使用getContent，如下所示：

<MenuItem data-tip="Shouldn't show this" data-for="tooltip">

<ReactTooltip id="tooltip" event="focus" getContent={() => {
                            return <div>Test</div>
                        }}/>

文档显示了这种可能性：https://www.npmjs.com/package/react-tooltip

注意：如果你有data-html = {true}那么它也将返回[Object object]

编辑：我想如果你想从工具提示中制作一个完整的html框，那么你最好找一个不同的插件。工具提示不应该用于完整的HTML吗？

Answer 2

在使用react-tooltip时，您需要在其文档https://www.npmjs.com/package/react-tooltip中设置html = {true}

option

然后在您的CSS文件中执行此操作

<ReactTooltip html={true} />

引用 https://github.com/wwayne/react-tooltip/issues/336

在react-tooltip中插入一个链接

2 个答案: