It is possibile to use <Link> inside the HTML content ?

[dragosdydy]

Hey, first, thanks a lot for this project, it's awesome! 👍

I was trying to create my tooltip, but for various reasons I need to add a <Link></Link> inside the HTML prop. It is not working, and I get the following error in the console: Uncaught Error: You should not use <Link> outside a <Router>

Any idea how I could use <Link> inside the tooltip ?

Thanks.

[derekedelaney]

Hi, I just ran into this issue as well. If you are using react-router, set useContext to ture and it will use the same context that router uses. After that, the error went away for me.

[vincentvpham]

In order to use a <Link> inside of the HTML content I had to add the useContext={true} prop as @derekedelaney mentioned.

Then I had to wrap <Link> in a HOC that removes tippy-popper elements and then navigates to the target page.

[lakesare]

With react-router@5 useContext solution didn't work.

What worked is wrapping tooltip's props.html in <Router>:

class Tooltip extends React.Component {
  getHtmlProp = () => {
    return this.props.html ?
      <Router history={history}>
        {this.props.html}
      </Router> :
      undefined
  }

  render = () =>
    <TippyTooltip
      theme="light"
      arrow
      arrowSize="small"
      {...this.props}
      html={this.getHtmlProp()}
    >
      {this.props.children}
    </TippyTooltip>
}

[ArtemSkliar]

Hi, try to use interactive props. https://github.com/tvkhoa/react-tippy#props