Comments (9)
I think it's fixed in the latest version
from tippyjs-react.
Not sure what you're trying to achieve. Do you want tippy around a <label>
or #targetElement
?
from tippyjs-react.
I'm guessing you're trying to use a focus
trigger? You need to set hideOnClick={false}
in that case.
from tippyjs-react.
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?
from tippyjs-react.
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?
from tippyjs-react.
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.
from tippyjs-react.
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
from tippyjs-react.
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.
from tippyjs-react.
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!
from tippyjs-react.
Related Issues (20)
- Zoom of page and wrong positioning HOT 3
- Not able to set different placement for different targets of the same singleton HOT 1
- [FEATURE] Add Tippy as tooltip library
- Tooltip position not updated on first time mousehover , until mouse does not move
- Custom `content` type for Headless Tippy Singleton
- Property `aria-expanded` stays false on strict mode
- Nested tippies and double tippies
- Headless Singleton calls render ahead of time
- When I put large text, the box doesn't fill all HOT 1
- Typescript 4.9.4 error @popperjs/core: This type parameter might need an `extends Obj` constraint.
- Inertia React HOT 1
- Error in Nextjs 13
- Plugins error (even though not loading any plugins) HOT 8
- Cannot render tooltip for svg elements
- Error in production, Tippy js not working after next js build HOT 3
- Issue with dynamic theme
- Error while updated nodejs version
- HTML only shown as regular text
- ESC key should hide tooltip for accessibility
- TippyJS not Updating getReferenceClientRect on Window Resize or Scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.