React-tooltip: <input> inside tooltip not receiving clicks
Hi there,
I'm trying to use a tooltip to render a URL input next to a div when I click on it (in my example code, I changed it to dblclick, so the click on the input doesn't close the tooltip). It displays, and all seems well -- however, I cannot click on the input. I can't seem to get focus. I tried setting the z-index of the input to an extremely high value (10000, then something like 99999999), but that didn't help. I also set isCapture={false} on the ReactTooltip component, but that didn't help either.
Here's my code (snipped a bit for brevity's sake):
<PostPlaceholder data-tip data-for="post-prompt" data-event="dblclick" />
<ReactTooltip id="post-prompt" className="post-prompt" place="right" eventOff="dblclick" effect="solid" isCapture={false}>
<input type="url" placeholder="https://www.instagram.com/..." />
</ReactTooltip>
Could you please tell me what I'm doing wrong, or whether this is a bug/unexpected behavior? Thanks in advance!
ajpocus
All 16 comments
This is probably because the tooltip has the pointer-events: none CSS declaration; change it to pointer-events: auto and you'll be good to go.
ZLevine
on 18 Oct 2018
@ZLevine Thank you you helped me a lot! I thought it was a z-index issue.
itsmichaeldiego
on 13 Feb 2019
@aronhelser This probably should be a property option "clickable" or something right?
itsmichaeldiego
on 14 Feb 2019
That's a good idea! Hopefully someone can work on it and submit a PR.
aronhelser
on 14 Feb 2019
@aronhelser I would like to work on this if okey?
EndiM
on 14 Feb 2019
yes, absolutely!
aronhelser
on 14 Feb 2019
:tada: This issue has been resolved in version 3.10.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
wwayne
on 6 Mar 2019
I'm a bit late to the party, but it's awesome to see this fixed! Thank you everyone for answering, and for fixing this issue! :tada: To be honest, I realized a bit too late I needed a popover, not a tooltip, and I was kind of abusing this tool. But hey, it's great to see this is doable with this tool now. :smile:
ajpocus
on 8 Mar 2019
Hi, I'm not sure this is fixed.
From the demo site (https://react-tooltip.netlify.com/), the input is still unfocusable.
timhwang21
on 16 Mar 2019
@timhwang21 You are right, the compiled style.css is missing the new allow_click class in the example site. @aronhelser Did I have to commit src/style.css and src/style.js, I see they get updated through build process.
EndiM
on 17 Mar 2019
I don't think the new build is automatically deployed to https://react-tooltip.netlify.com/, I didn't set that up. I'll have to check.
aronhelser
on 18 Mar 2019
I should have also mentioned that I'm seeing the same incorrect behavior in my application using the latest version. Thanks for the quick response!
timhwang21
on 18 Mar 2019
Can you look at the styles in your app that are applied to the tooltip and
see what is preventing the "pointer-events: auto" style from taking effect?
On Mon, Mar 18, 2019 at 4:11 PM Tim Hwang notifications@github.com wrote:
I should have also mentioned that I'm seeing the same incorrect behavior
in my application using the latest version. Thanks for the quick response!—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/417#issuecomment-474081687,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AS_pnRnqBwDR4wkGbR7xqZCFKqTIfW0Zks5vX_L2gaJpZM4WMjOf
.
aronhelser
on 19 Mar 2019
@aronhelser it was my problem. That fixed it... thanks!
timhwang21
on 19 Mar 2019
Can you elaborate on what fixed the problem for you? Did you have to change
something using the latest version?
On Tue, Mar 19, 2019 at 6:10 PM Tim Hwang notifications@github.com wrote:
@aronhelser https://github.com/aronhelser that fixed it... thanks!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/417#issuecomment-474604444,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AS_pnfezuBluXgYwlXDCCG4nnZ8Qn_CCks5vYWBngaJpZM4WMjOf
.
aronhelser
on 20 Mar 2019
Sorry, I did in fact have a local style that overwrote that rule. The rule
is being properly applied by the library.
On Wed, Mar 20, 2019 at 9:20 AM Aron Helser notifications@github.com
wrote:
Can you elaborate on what fixed the problem for you? Did you have to change
something using the latest version?On Tue, Mar 19, 2019 at 6:10 PM Tim Hwang notifications@github.com
wrote:@aronhelser https://github.com/aronhelser that fixed it... thanks!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/wwayne/react-tooltip/issues/417#issuecomment-474604444
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AS_pnfezuBluXgYwlXDCCG4nnZ8Qn_CCks5vYWBngaJpZM4WMjOf.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/417#issuecomment-474825115,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFj7CjI_ndJyXt9dgOCIo6hZjIkORuOdks5vYjWRgaJpZM4WMjOf
.
timhwang21
on 20 Mar 2019
Related issues
tonynd
·
3Comments
jhlee4
·
3Comments
Joseppi83
·
4Comments
alex6633
·
3Comments
donilan
·
4Comments
Most helpful comment
This is probably because the tooltip has the
pointer-events: noneCSS declaration; change it topointer-events: autoand you'll be good to go.