Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

State:
Created 5 years ago
Comments:9 (9 by maintainers)

Top GitHub Comments

1reaction

atomikscommented, Feb 7, 2020

I think it’s fixed in the latest version

0reactions

benkeencommented, Feb 13, 2019

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!

Top Results From Across the Web

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

When embedding my Tippy within a label that has an htmlFor attribute, the tippy doesn't show up. Looking at the DOM, I think...

Tooltip inside TextInput label is not working. Material-UI + React

Problem: When hovering over the (?) icon tooltip does not appear. I have tried coding the input in 2 different ways using FormControl...

All Props | Tippy.js - GitHub Pages

Prop Default Description plugins Specify plugins to use. See Plugins for details. role "tooltip" Specifies the role attribute on the tippy element. zIndex 9999 Determines the...

HTML Tooltip | How to Add Tooltip in HTML with examples?

Tooltip is a concept used in HTML for showing some extra information about the specifically selected element. This can be done on the...

Labeling Controls | Web Accessibility Initiative (WAI) - W3C

In most cases, this is done by using the <label> element. ... is shown to visual users as a tool tip when hovering...