<input> inside tooltip not receiving clicks

[ajpocus]

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!

[ZLevine]

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.

[itsmichaeldiego]

@ZLevine Thank you you helped me a lot! I thought it was a z-index issue.

[itsmichaeldiego]

@aronhelser This probably should be a property option "clickable" or something right?

[aronhelser]

That's a good idea! Hopefully someone can work on it and submit a PR.

[EndiM]

@aronhelser I would like to work on this if okey?

[aronhelser]

yes, absolutely!

[wwayne]

🎉 This issue has been resolved in version 3.10.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[ajpocus]

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! 🎉 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. 😄

[timhwang21]

Hi, I'm not sure this is fixed.

From the demo site (https://react-tooltip.netlify.com/), the input is still unfocusable.

[EndiM]

@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.

[aronhelser]

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.

[timhwang21]

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!

[aronhelser]

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 ***@***.***> 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 <#417 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnRnqBwDR4wkGbR7xqZCFKqTIfW0Zks5vX_L2gaJpZM4WMjOf> .

[timhwang21]

@aronhelser it was my problem. That fixed it... thanks!

[aronhelser]

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 ***@***.***> 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 <#417 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnfezuBluXgYwlXDCCG4nnZ8Qn_CCks5vYWBngaJpZM4WMjOf> .

[timhwang21]

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 ***@***.***> 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 > < #417 (comment) >, > 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 <#417 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFj7CjI_ndJyXt9dgOCIo6hZjIkORuOdks5vYjWRgaJpZM4WMjOf> .