Tippy within <label> with htmlFor prop doesn't show tooltip

[benkeen]

When embedding my Tippy within a label that has an htmlFor attribute, the tippy doesn't show up. Looking at the DOM, I think it's adding then removing the tippy with a single click.

<label htmlFor="targetElement">
    Text here.
     <Tippy ... />
</label>

[KubaJastrz]

Not sure what you're trying to achieve. Do you want tippy around a <label> or #targetElement?

[atomiks]

I'm guessing you're trying to use a focus trigger? You need to set hideOnClick={false} in that case.

[benkeen]

Apologies! This was poorly explained on my part.

I was just updating to Tippy from an older tooltip lib and had the following markup structure where the tippy was inside a label. It's unrelated semantically and has nothing to do with the label - it just happened to exist within it.

I've done a little digging and found that this works fine. The tip appears when clicking the button.

<div>
    <label htmlFor="field">
        Label here.
        <Tippy content="Infotip." placement="right" zIndex={19998} trigger="click">
            <button>Click me.</span>
        </Tippy>
    </label>
    <input type="text" id="field" />
</div>

But when you change the button element to a span, the tippy no longer appears.

If you leave it as a span, but remove the htmlFor attribute on the label, the tooltip then appears again.

Not sure if that's expected behaviour?

[atomiks]

But when you change the button element to a span, the tippy no longer appears.

Right, I think we should account for this. Currently there's no check if children changed to recreate the instance.

Want to make a PR?

[benkeen]

Actually I think this isn't to do with the children changing (but that's an interesting clause!), it just doesn't seem to trigger at all with a span. Refreshing the page with the span as the dom node & the tip doesn't show up.

[atomiks]

I can reproduce that on CodeSandbox. I think it has something to do with the focus instantly switching to the input (upon clicking the <span>). Using hideOnClick="toggle" seems to fix it...

https://codesandbox.io/s/nl3nn2n2p

[benkeen]

I think it has something to do with the focus instantly switching to the input

Yeah, that sounds likely. I wonder if it would be more standard behaviour to prevent the bubbling to occur here so it doesn't focus? - or just preventing the focus event affecting the tip.

But thanks for the workaround.

[benkeen]

btw, as a workaround which enabled me to keep the desired clicking behaviour, I simply used a button and styled it appropriately. That element prevents it from focusing on the input field & all is well. Thanks again!

[atomiks]

I think it's fixed in the latest version