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 ***@***.***> 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 <#467 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnbJ1HrCpfHpRlsw0VkkIu7zQswoUks5vIsqjgaJpZM4aCsmY> .

[dmc1985]

@aronhelser I'd be happy to make a PR with an update to the examples. I won't have time for a little while, but I'll do it asap. If I have any trouble, I'll let you know.

@kopax Small thing: I found it's better to use a instead of a

in the jsx inside the Tooltip component. Using a controls the position more accurately.
So my Tooltip component now looks like this:

function Tooltip(props) {

    const tooltipId =  `${props.content || ''}${props.title || ''}${props.theme || ''}${props.place || ''}`
    return (
        <div>
            <ReactTooltip
                id={tooltipId}
                type={props.theme}
                effect='solid'
                place={props.place}
            >
                {props.title && <p className="title">{props.title}</p>}
                <p className='content'>{props.content}</p>
            </ReactTooltip>
            <span data-tip data-for={tooltipId}>
                {props.children}
            </span>
        </div>
    );
}

Also, when implementing the tooltip in your app, try to wrap it in the smallest div possible to control its position. So for example. Instead of doing <h2><Tooltip>Text</Tooltip></h2>,
I found this works better:
<h2><Tooltip><span>Text</span></Tooltip></h2>

[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 target dev'. 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.