How can I render react component within tooltip?

Hi and thanks for sharing this library.

I’ve been testing a few and it is the only one that work.

One thing I need to do is to passe react-component within the tooltip, but the data-tip is the only prop I know that can be added in the tooltip and it expect a string.

Is it possible to render react-component within tooltips?

Thanks in advance

[dmc1985]

I was able to pass a React Component as the child of the tooltip by constructing a Tooltip component based on react-tooltip. Here is what I did:

<div>
    <ReactTooltip
        id={tooltipId}
        type={props.theme}
        effect='solid'
        place={props.place}
    >
        <p>{props.content}</p>
    </ReactTooltip>
    <div data-tip data-for={tooltipId}>
        {props.children}
    </div>
</div>

The key is to construct a unique Id for each tooltip that will appear on the same page to prevent collisions. I did that by using the props I pass to the Tooltip component. So at the top of the Tooltip component, I put: const tooltipId = ${props.content}+${props.title}+${props.theme}+${props.place} (please note that I put backticks around the templated string - hard to format this with markdown)

This allows me to render react components within my Tooltip component like so:

<Tooltip content={props.title} theme="dark" place="bottom">
                <h4>{props.title}</h4>
</Tooltip>

I hope this helps you!

[dmc1985]

Hi @dmc1985, any progress in your PR?

Thanks for following up on this and my apologies for the delay. I still would like to do a PR to update the doc with the code snippet, and my goal is to do it over the weekend.