<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!