Comments (6)
Also note that the problem doesn’t go away when using container={document.body}
. So it is not an error in placement of the tooltip, but really in calculating the trigger offset. It does work when using fixed
, even when the tooltip is placed in the same container (<main>
in this case).
from react-laag.
Hi Rijk, ouch...
I have taken a quick look and I immediately saw this warning message in the console:
react-laag: Set the 'position' style of the nearest scroll-container to 'relative', 'absolute' or 'fixed', or set the 'fixed' prop to true.
This is needed in order to position the layers properly.
Currently the scroll-container is positioned: "static". Visit https://react-laag.com/docs/#position-relative for more info.
<main>…</main>
I added position; relative;
to the scroll-container (main
in this case), and that seems to fix the problem. When I removed overflow: auto;
from the main
element, it also seemed to position correctly.
A little background, and please tell me if this make sense:
react-laag places the layers into the nearest scroll-container (main
), by searching for overflow: auto;
/ overflow: scroll;
properties in the tree, and will eventually fallback to document.body
. This scroll-container's positions than become the reference-point for the layer's position. In other words, the layer is positioned relative to the nearest scroll-container. During development mode, react-laag checks whether the scroll-container was indeed positioned relative
(or absolute
/ fixed
).
In the sandbox you've provided, the positions are calculated relative to the main
element, but the layer is placed on the body
. I measured a 60px difference to be exact, and that's the same height as the nav
element.
Does adding position; relative;
work for you?
from react-laag.
OMG, really?? I can’t believe I didn’t see that! You must think I’m stupid now, haha.
Yes, position; relative;
works like a charm, thanks.
Edit: well looking back, I do see now how I missed the warning:
But I must admit I wasn’t at my sharpest yesterday 😴
from react-laag.
No not at all, don't worry! ;)
Yeah, I get buried in those 'cross-site' warnings to, so I don't blame you for missing the warning! Do you think an error message is more appropriate? It is kind of an error in the sense that the actual behavior will be different than the user intented... although it doesn't break your app completely 🧐
from react-laag.
Good point. An error would have caught my eye I think, but I agree a warning is more appropriate here. Although.. Yeah it’s really something you want to fix in your app, because the positioning will likely be off. So you could call it an error in that sense, yeah.
I think React triggers errors for these kinds of things in dev mode (developer needs to address it), but not in production (doesn’t break the app). Maybe you could use a similar approach here?
(I had to reopen the issue to be able to leave a comment)
from react-laag.
Yeah, I do feel that the developer should address it in dev mode, so I tend to at change console.warning to console.error. Will put that on the next release ;)
(Will close this issue for now, because the title ('Positioning issue') is a bit misleading)
from react-laag.
Related Issues (20)
- How to pass a clientRect in v2? HOT 1
- [BUG] Placement of tooltip in safari when zoomed in is not correct
- Tooltip flickers while hovering on the button
- [BUG] Minimal get started example does not work properly
- [FEATURE] add possibility to interact with elements in tooltip when using "UseHover" hook HOT 2
- work with react-transition-group , sometimes will flashing before the animation starts
- [BUG] tooltip created with react-laag not working when called from a modal created with react-modal
- [BUG] State updates on unmounted components in JsDom HOT 1
- migrating v1 to v2 ToggleLayerProps open function HOT 3
- [BUG] shadow DOM not working via environment parameter
- [BUG] onMouseLeave event not firing when mouse is moved quickly in Firefox HOT 2
- [BUG] - Popover not sticking to div element on Google Maps (might not be bug)
- [BUG] React-18 Support HOT 3
- [BUG] Layers flashing at old position before getting displayed at correct position HOT 5
- Does not show tooltip in full screen mode HOT 1
- How do you handle cases where a modal is shown from clicking in a layer HOT 2
- [BUG] onDisappear is triggers when we render component with react-testing-library
- [BUG]: Hydration fails with nextjs app router HOT 2
- [BUG] using react-laag in a child window via React portals renders in the parent window
- [BUG] Tooltips are not closing when the hovering is too fast.
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.
from react-laag.