React-tooltip: My tooltip does not appear

Created on 13 Feb 2019  Â·  6Comments  Â·  Source: wwayne/react-tooltip

I have...

import ReactTooltip from 'react-tooltip'

<ReactTooltip effect="solid" />

<th data-tip={text} ... />

Just like the instructions say. If I uncheck a bunch of CSS rules then I can see the tool tip sitting empty on the screen.

But it doesn't appear when I roll over the . What reason could there be for this?

documentation

Most helpful comment

I did this...

componentDidUpdate() {
   ReactTooltip.rebuild();
}

All 6 comments

If your item is not a child of the ReactToolTip, you need to use the data-for='happyFace' property on your item, and the id='happyFace' property on the ReactToolTip, so they link up. It's shown in the first example. I'll take a look at the code at the top and see why the first example code shown is not correct.

That didn't fix it unfortunately.

It works if I add a tooltip to another page element even without specifying an id. Why doesn't it like my generated table header cells?

It's because your generated table cells aren't present when the Tooltip is
created. You need to call .rebuild() after they are created so the
tooltip can discover them.

On Thu, Feb 14, 2019 at 6:46 AM FruitAndAShape notifications@github.com
wrote:

It works if I add a tooltip to another page element. Why doesn't it like
my generated table header cells?

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

Where is the optimum place to do this? After every render?

I did this...

componentDidUpdate() {
   ReactTooltip.rebuild();
}
Was this page helpful?
0 / 5 - 0 ratings