behavior I don't understand, is this a quirk of react or react-tooltip? about react-tooltip

[kswope]

I only ever put <ReactTooltip /> in one place, which makes sense to me. I only import it in that same file. But in order for the tooltips to work, I have to <p data-tip="hello world">Tooltip</p> either in the same component or a component close to it (maybe it has to be on the same 'side' of the smart component, I'm not sure). Once I put <p data-tip="hello world">Tooltip</p> In a component 'close' to where its required, the tooltips everywhere start working.

I can confirm that putting ReactTooltip.rebuild() in componentDidMount (and reloading page) does NOT work, but in componentDidUpdate DOES work.

This is not such a problem for me, I thought I'd just point out this strange behavior. I'm not sure how smart components in redux work but it looks like some voodoo is going on there and it might be interfering with react-tooltips, or it might have nothing to do with it, but thats all I can think of.

Good looking tooltips btw 👍

[wwayne]

If I'm not misunderstand, the code structure you said is as follows:

<div>
<HighLevel>
   <MiddleLevel>
       <LowLevel />
   </MiddleLevel>
</HighLevel>
<ReactTooltip />
</div>

LowLevel: 
render () {
 return (
   <p data-tip='xxx'></p>
 )
}

If so, on my test, this works good. So I suppose you mount the lower level component after triggering some actions?

There is a ReactTooltip.rebuild() function to 're-bind' tooltip, so I think you can take a try by

import ReactTooltip from 'react-tooltip'
export default class MiddleLevel extends React.Component {
  componentDidMount () {
     React.rebuild()
  }
}

Let me know if I misunderstand your problem.

[wwayne]

Try

setTimeout(() => {
     ReactTooltip.rebuild();
 }, 100)

in componentDidMount can works for you.

I don't think Redux could interfere react-tooltips because I've used them together, I'm not very clear about your product's requirements but in my practice, I put <ReactTooltip /> in every smart component, it is just like what you said to be on the same 'side' of the smart component, maybe that's why I never meet with the strange behavior that you said.

Since smart component is always to be the high level component(like routeHandler in react-router), putting <ReactTooltip /> in every smart component is reasonable.

So I suggest you try to put <ReactTooltip /> in every smart component instead of importing it in a same file.

[wwayne]

@oyeanuj
1.Yes, I suggested to do that(looks little wired), and as @kswope said, put ReactTooltip.rebuild() in componentDidUpdate could also works, I think you can also take a try on this way.

2.Yes, tooltip supports what you need, you can check the advance features in example
html tooltip : check html feature in the doc
JSX: doc

Please feel free to ask me if you still have problems.

[enapupe]

Appreciate the suggestion however I don't feel like adding such hack to every component that has a data-tip as this feels very un-React. Not to mention that componentWillMount is sunsetting at some point soon. But I guess it could be called on didMount without the timeout...

I'm afraid I'll have to implement my own tooltip component or switch to another library as I'm not able to find any elegant solution for react-toolip.
Thanks for your attention.

[kswope]

You have that exactly right. As I pointed out, if I put a tooltip in the MiddleLevel and moused over it it would enable the lowest level tooltips to work. I'm baffled.

I'm using redux for the flux. Maybe it has something to do with the transition from "smart" to "dumb" components, since that looks like the threshold react-tooltip won't work across.

[wwayne]

@kswope
I happened to use Redux and react-tooltip in my recent project, I put <ReactTooltip /> in the smart component and use it in dumb component by data-tip='...'.

I suggest always put only one <ReactTooltip /> in the highest level or smart component, in the lower level(e.g. dump component), you just need to set something like <div data-tip='tooltip content'></div>, then the react-tooltip will find your tooltip and show it. You don't have to import <ReactTooltip /> in every level, I think this can solve your problem?

[oyeanuj]

@wwayne I know this is a closed issue that I am running into the same problem as well. Are you suggesting that we add the timeout in the file where 'ReactTooltip' is declared '(HighestLevel Component)' or where the element with data-tip is declared?

Also, through the data-tip attribute, can we pass any JSX? An array, custom element or html? Or is it only HTML?

Thanks for your work on this plugin!

[oyeanuj]

@wwayne Thanks for your suggestions!

1. To keep only one ReactTooltip instance on the page, I have to do it on the highest level component, and with a setTimeout as you suggested. That works! However, having a timer there makes me a little uncomfortable.
   Is the only other alternative having id-based multiple ReactTooltip instances? Would you suggest that approach instead?
2. I am still having issues with the html tooltip when trying to pass value through data-tip. The examples aren't passing the values thru the data-tip method - I would love some tips there. I am trying to pass an array of custom Link elements (React-Router) and the tooltip only seems to be displaying [object Object].

[wwayne]

1. Yes, having id-based is the only other choice, for myself, I don't like this, I don't want to manage so many tooltip components.
2. I will do some test on this later, so you are trying to put something like[<Link />, <Link />] into tooltip, no?

[oyeanuj]

Thanks again for the prompt response!

And yes, thats what I am trying. Here is a cleaned up version of what I am trying: http://jsfiddle.net/oyeanuj/Loyhmk69/

[wwayne]

@oyeanuj I'm not clear about your situation, but my test works well, I hope it could help you:

import { Link } from 'react-router'
import React, {Component} from 'react'
import ReactTooltip from '../../src/index'

class Test extends Component {

  render () {
    const items = [
      {name: 'test1', id: 1},
      {name: 'test2', id: 2},
      {name: 'test3', id: 3}
    ].map((item) => {
       var link = "/items/" + item.name;
       return (
         <Link key={item.id} to={link}>{item.name}</Link>
       );
    });

    return (
      <div>
        <p data-tip data-for='test' data-place='left'>Hover here to show list</p>
        <ReactTooltip id='test'>{items}</ReactTooltip>
      </div>
    )
  }
})

So here, you should just add a data-tip in the target, no data for it, and your jsx tooltip should in the <ReactTooltip id='test'>(don't forget id and for, they are bridge)

And I guess you want to use some link in tooltip, and user can hover the tooltip then click on these link, then you need class and delay-hide to help you, for example :

<a data-tip="tooltip" data-class="extra" data-delay-hide="500"></a>
<ReactTooltip />

.extra {
 &:hover {
   visibility: visible !important;
   opacity: 1 !important;
 }
}

original issue: #35

[oyeanuj]

@wwayne thanks for getting back!

So I was using your earlier suggestion of having one ReactTooltip component declared in a higher level component and just adding data-tip attribute wherever I need to show a tooltip in the lower-level component.

The approach seems to be suggesting instead to have an individual ReactTooltip component with an id, wherever I need it.

So, my question was if there is a way to pass an array of components through data-tip using the first approach without having to create a ReactTooltip component everywhere?

[wwayne]

@oyeanuj
No, react-tooltip can't support using in this way. If you want to use components as tooltip, you have to use id-based way, but you can have many target(< data-for='xx' >) to point to a same react-tooltip(<ReactTooltip id='xx'/>)

[oyeanuj]

Hi @wwayne! Happy new year! So I had a chance to come back to my project and tried what you suggested. The one thing which doesn't work is showing the content of the ReactTooltip when data-tip has no value.

<span
    data-tip
    data-for = {tooltipId}
    data-place = "bottom"
    data-type = "light"
    data-offset = "{'bottom': 30}"
    data-effect = "solid"
    data-class = {styles.extra}
    data-delay-hide = "500"
    data-html
    data-multiline
> # </span>
<ReactTooltip id = {tooltipId} >
    <h4>Your list</h4>
    {renderHashtags()}
</ReactTooltip>

Now the problem is that the tooltip always shows true instead of the h4 and the return value of the function. Do you have any pointers on what might be going wrong here?

[wwayne]

@oyeanuj Happy new year : )
That's because you add data-html in your tooltip, when you use data-html, you can only use in this way: <span data-tip='<p>HTML tooltip</p>' data-html ></span> instead of id-based model.
So just remove data-html can solve your problem.

[oyeanuj]

That worked, thank you so much for your quick response! :)

[semosem]

Is there a way to make react-tooltip follow it's data-tip element when that element is scrolled.

For example if I have a container containing my data-tip as

<div class="container">
   <a data-tip data-for="my-rtt"/>
</div> 

<ReactTooltip id="my-rtt"/>

if the container div is scrollable I want the ReactTooltip to follow it's data-tip.

[enapupe]

Hey, sorry to bring this up again:

I'm currently using react-router and have a toplevel App component on which I render the main <ReactTooltip component. That's working nice for the first render but when an user opens any <Link, rendering another view, tooltips stop working.

The setTimeout + rebuilt() workaround seems to WORK but only if the child view is fully rendered when the timeOut kicks in. Because my main App is not connected to redux, it will only call didUpdate before the child view gets fully rendered.

Is there any other way to make this thing work, without using the didUpdate + timeOut strategy?

[tessa-code]

@enapupe Here is one solution: Use a setTimeout with zero delay in componentDidMount in the component that renders the tooltip content. It's still hacky but at least with zero timeout delay it implies the solution isn't relying on a magic amount of time to wait for rendering.

Application root render:

<Provider store={store}>
    <React.Fragment>
        <ReactTooltip place="top" type="dark" effect="solid" />
        </* Application routes, views, etc here. */ />
    </React.Fragment>
</Provider>

Some component that displays tooltips:

export class DisplaysATooltip extends React.Component {
    componentDidMount = () => {
        // Zero delay
        setTimeout(ReactTooltip.rebuild, 0);
    };

    render = () => (
        <div className="displays-a-tooltip">
            Hello
            <p data-tip="Tooltip text">Hover to see tooltip</p>
        </div>
    );
}

[tessa-code]

@enapupe I agree, it would be good to find a solution that doesn't require rebuild at all. Thanks for reminding me that componentWillMount is deprecated, I edited my comment to use componentDidMount which works just as well.

You could also put the setTimeout/rebuild functionality inside a higher order component that wraps the tooltip content.

[enapupe]

Yeah, the HoC idea occurred to me, will give it some thought. Thanks again!

Not to be picky, but you could write it as:

componentDidMount = () => {
  // Zero delay
  setTimeout(ReactTooltip.rebuild);
};

(specially about creating an unnecessary anonymous fn part)