React-tooltip: How can I render react component within tooltip?

[kopax]

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!

[kopax]

Hi @dmc1985 thanks for sharing up your solution.

Does this also work with react component ? instead of using plain html?

[dmc1985]

@kopax Yes I found that it does work with a react component.

You could create a simple functional component like so:

function Tooltip(props) {
  return(
    <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>
  )
}

export default Tooltip;

You can also use the jsx in the render method of a class component if that works better for you. You can then import this Tooltip component and use it to wrap other React components (see example in my first comment). I found that this implementation is a bit more intuitive than the method described in the doc of react-tooltip.

[kopax]

Great, may I leave this open as this should be in the documentation?

[dmc1985]

That's fine with me.

[aronhelser]

It would be great if you wanted to submit a PR with an update to the
examples! Let me know if you think you can....

On Thu, Jan 31, 2019 at 5:51 AM David Martin Cohen [e-mail]
wrote:

That's fine with me.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/467#issuecomment-459300958,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AS_pnbJ1HrCpfHpRlsw0VkkIu7zQswoUks5vIsqjgaJpZM4aCsmY
.

[roggervalf]

Hi @dmc1985, any progress in your PR?

[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.

[dmc1985]

@Rogger794 @aronhelser When I enter the command make dev per the instructions in contributing.md I receive the following error: make: *** No rule to make targetdev'. Stop.When I try to launch the server usingyarn start`, I cannot find the correct port to access the development server. What do you recommend I do?

[roggervalf]

Hi @dmc1985, could you please bring the last changes from master, I already update the contributing readme.