scrollHide not hiding tooltip on mobile

[ryan-hamblin]

I'm assuming this has something to do with the "hover" event since there isn't really one in Mobile. I'm wondering if anyone else has run into this problem and come up with a solution, I don't want to have to add eventHandlers all over to capture the scroll event.

Here is an example of my code:

<ReactToolTip 
    multiline={true}
    scrollHide={true}
    scrollResize={true}
    class="tipOverrides"
    id={tipid}
    effect="solid"
    place='top' 
    type='info'/>

I'm trying to use the scrollHide and scrollResize events according to docs.

[philraj]

scrollHide is actually not working at all for me (on desktop). Are you using a single top-level <ReactTooltip> element?

[ajritch]

+1 to scrollHide not working (on desktop), not using a single top-level element.

[huumanoid]

Hey guys, can this issue be reproduced at the examples page?
I can see that the left tooltip of the "Theme and delay" section reproduces the same issue.
But that issue caused by delayHide.

Please, provide more information how to reproduce this.

[ryan-hamblin]

to clarify @philraj and along with what @ajritch said, I'm not using this as a top level element at all. It's actually being used on a table that lazy loads rows "Fixed-Data-Table" to be exact. I ended up re writing the table and building my own tooltip. haha good ol' fashioned work around/work through.

@huumanoid to reproduce, simply install the element, hover to activate and show the tooltip, and start scrolling. It wont go away. :)

[philraj]

@huumanoid No, can't reproduce it with the examples given. It might be because I'm using the tooltips within overflow: scroll containers in my project. Are you able to test that case? I don't have time to test it myself unfortunately.

I am using a single <ReactTooltip/> component but that doesn't seem to be the deciding factor here.

[huumanoid]

Thanks guys. I think I've catched it. I'm going to fix it in 3.2.11 or 3.2.12.

<div id="root">
  <ReactTooltip />
  <div style={{ width: '5000px'; height: '5000px' }} />
</div>

[guzhavin]

This problem solved?

[ryan-hamblin]

I believe so. Should I close the issue?

[guzhavin]

@ryanhca I see this bug in the current version.

[aronhelser]

Based on a comment in #291, there is a work-around. add data-iscapture="true" to your tooltip target. I'm not sure what other implications this has, though.

[aronhelser]

🎉 This issue has been resolved in version 3.5.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[thomashibbard]

@aronhelser As of 3.6.0, this is still not working for me by adding the attributes data-scroll-hide on the tooltip and scrollHide on the ReactTooltip component. Unless the intention is that it waits until scrolling is stopped before the tooltip is removed.

---

Ah, I see it is only failing to work when you set a delayHide. Is this a bug?

[aronhelser]

I'm not sure I understand, but it could be. What behavior do you expect if you set both delayHide and scrollHide? Based on the behavior of the tooltip in the "Theme and Delay" section of the demo (http://wwayne.com/react-tooltip/) I think the tooltip hanging around for the delay after a scroll is the expected behavior.

[thomashibbard]

@aronhelser I wouldn't think so. If a user scrolls down the page for several seconds (slowly, or it's a large page) the tooltip will remain positioned in its static position on the page for the entire time. It's really odd looking (ie, looks buggy) to just have it hanging out there for the entire duration of the scroll. For me it should disappear after scroll-start + delay, or have its own delay entirely.

[aronhelser]

Can you file a new issue?

…

On Thu, Jun 7, 2018 at 5:59 PM, Thomas Hibbard ***@***.***> wrote: @aronhelser <https://github.com/aronhelser> I wouldn't think so. If a user scrolls down the page for several seconds (slowly, or it's a large page) the tooltip will remain positioned in its static position on the page for the entire time. It's really odd looking (ie, looks buggy) to just have it hanging out there for the entire duration of the scroll. For me it should disappear after scroll-start + delay, or have its own delay entirely. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#248 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pneOra_fh7iwHvkpVJ3aU2VHEWcXnks5t6aJYgaJpZM4Lx_LX> .

[essaji]

I am still facing this issue in 3.6.1

[yarik-vv]

We are still see this issue in v3.9.2.

[umihui]

I am still see this issue in v3.10.0 if I set delayHide

Ah, I see it is only failing to work when you set a delayHide. Is this a bug?

[kashifshamaz21]

I think this issue arising due to combination of delayHide and scroll is being tracked under #474, for others who stumble here on this issue for this, lets use Issue 474 for adding comments, up-voting and further analysis/PR.

[filipkowal]

Based on a comment in #291, there is a work-around. add data-iscapture="true" to your tooltip target. I'm not sure what other implications this has, though.

If the event target is an SVG, the tooltip will appear only on hovering over the strokes.
Can easily be fixed:

  svg {
    pointer-events: all;
  }

[judict]

The issue is still there, even on desktop.

[emre-ozgun]

I'm experiencing this issue on desktop as well. v4.2.21 - super vexing since I rely heavily on z-index manipulation so not being able to hide on scroll would hinder our users' experience.