React-tooltip: ReactTooltip renders very slow when used many time on the same page

[arfordweb]

I'm displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow. When I remove just the ReactTooltip elements, the table renders quickly. When a tooltip appears in every row in the table that contains about 500 items, my browser slows to a crawl for a bit until the render is complete.

[joshhunt]

Interested in this issue. I have a page with a couple hundred items on it that need a tooltip and I'm unsure of the right way to do this.

If I include a <ReactTooltip> for every item, the page is unusable - not only is there huge multisecond delay introduced by the tooltip on initial render, actually hovering over the items is extremely laggy.

I tried having a single <ReactTooltip> element at the root in combination with the getContent prop, but the getContent function doesn't receive any arguments to know what it's supposed to be rendering.

[kuldeepkeshwar]

@arfordweb @joshhunt have you find any solution/workaround for this? I'm also having same use-case

When I tried it with why-did-you-update,
I was getting warning while hovering over the cells

[Violation] Forced reflow while executing JavaScript took 411ms
[Violation] Forced reflow while executing JavaScript took 311ms
[Violation] Forced reflow while executing JavaScript took 444ms
[Violation] Forced reflow while executing JavaScript took 315ms
[Violation] Forced reflow while executing JavaScript took 273ms

[joshhunt]

Ultimately I went with https://github.com/romainberger/react-portal-tooltip

[kuldeepkeshwar]

@joshhunt I can't upgrade to React 16, any other solution?

[joshhunt]

I just copied the module's source code into my repo and made the slight
modifications that were required.

On Thu, Dec 21, 2017 at 1:11 PM anotherjsguy [e-mail]
wrote:

@joshhunt https://github.com/joshhunt I can't upgrade to React 16, any
other solution?

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

[divyanshu013]

Managed to resolve my issue with rc-tooltip https://github.com/react-component/tooltip