Dynamic Content while tooltip still open

[rknruben56]

Hi,

I'm currently using the getContent prop to send in dynamic content whenever the tooltip is shown. However, is there a way to have the content be updated while the tooltip is still open? (Ex. let's say I want to add a class to a certain html element in the tooltip when a user clicks a checkbox) Currently it's only updated when the tooltip event is triggered after it's hidden.

[BradRyan]

I too was looking for this functionality. In my case, state was changed when you clicked the button and I wanted the tooltip content to update. Best I could do for now was to close the tooltip on click... not sure if this could be helpful for you.

Ex:

<ReactTooltip
    id={id}
    event="mouseenter"
    eventOff="mouseleave click"
>
    <span>{title}</span>
</ReactTooltip>

[Dimillian]

So there is no way to refresh the content of the tooltip once it's displayed? I have dynamic content inside, it's fetch while the tooltip open, and I need to update what's displayed inside once it's done.

[jeanmichelcote]

I had the same problem here. But found a solution:

I added the static method ReactTooltip.rebuild() in my componentDidUpdate lifecycle hook, like so:

componentDidUpdate() {
  if (this.props.myTooltipData !== prevProps.myTooltipData) {
    ReactTooltip.rebuild();
  }
}

Works like a charm. Does not even need @BradRyan 's suggestion.

[Xecutor]

Here is hacker'ish solution:
In componentDidUpdate method I'm calling this:
if(this.tooltip.state.show) {
this.tooltip.setState(
{
placeholder:this.tooltip.state.currentTarget.getAttribute('data-tip')
}
);
}
where this.tooltip is ref to

Close to ideal way would be to pass currentTarget to getContent function.

[utajum]

I couldnt get ReactTooltip.rebuild() to work in the setState callback, so i did

<ReactTooltip key={'tooltipKey' + this.state.activeMenu} />

When you add a random key the tooltip is gone and it forces you to hover again to show the new tooltip, not ideal, but i couldnt make anything else to work.

[nachikethashu]

Having the same issue with checkbox inside the react-tooltip.

Why this PR(#281) is not being merged?

[alejandrosobko]

You have to add getContent to the ReactTooltip.
This worked for me:

<span data-tip={this.copyMessage()} />
<ReactTooltip effect="solid" getContent={this.copyMessage} />

copyMessage is the function that returns the message dynamically.

[jeffkillian]

I had an issue where it was not appearing on a dynamically generated react component. I solved it similarly to @jeanmichelcote: Just had to rebuild the tooltips on first mounting the component.

    componentDidMount(){
        ReactTooltip.rebuild();
    }

[nivapo95]

For anyone that still looks for a solution: there is no built in option to use dynamic content while the tooltip is still open.
What I did was create 2 different tooltips and display each one before and after a user clicked.

Here is a working example for me:

<CopyToClipboard
    text={"MY_TEXT_TO_COPY"}
    onCopy={() => {
        setCopiedCustomerId(true);
        ReactTooltip.rebuild();
        setTimeout(()=> {
            setCopiedCustomerId(false);
            ReactTooltip.rebuild();
        },3000);
    }}
>
    <div>
    {!copiedCustomerId && <span data-for={"myTooltip"} data-tip={"Copy"}>MY_TEXT_TO_COPY</span>}
    {copiedCustomerId && <span data-for={"myTooltip"} data-tip={"Copied"}>MY_TEXT_TO_COPY</span>}
    </div>
</CopyToClipboard>