在react-tooltip中插入一个链接

时间:2017-06-13 21:56:14

标签: javascript reactjs hyperlink tooltip

我正在尝试在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 />

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

2 个答案:

答案 0 :(得分: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吗?

答案 1 :(得分:0)

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

option

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

<ReactTooltip html={true} /> 

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