2

I'm trying to figure out how to make a popover with Popper.js to stay in the parent container of both the popover and the target when scrolling.

Here is an example: https://codesandbox.io/s/upbeat-hodgkin-ib2trf?file=/src/index.js

To reproduce the issue, we must set the height of the page small enough. We can see that the popover, overflow in the content under the main container #container.

I would like the popover to stay in the #container when scrolling down.

Ganbin
  • 2,004
  • 2
  • 12
  • 19
  • Tooltips are meant to be temporary information boxes, always on top when required, but most of the time hidden. That definition does not jive with getting covered by some inline content. – KIKO Software Apr 17 '23 at 08:00
  • @KIKOSoftware maybe I should rename the issue by using popover instead of tooltip – Ganbin Apr 17 '23 at 09:24
  • I think you've tried to modify [this example](https://codesandbox.io/s/github/floating-ui/popper.js.org/tree/master/examples/overflow-prevention). I copied the code and, like you, changed it slightly. See: https://codepen.io/kikosoft/full/VwEjmYE Here the popover remains inside the parent. After some experimenting I found that having `position: relative;` on *all* content blocks is what's missing from your code. – KIKO Software Apr 17 '23 at 10:00
  • A relative position is often used to create a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) which is needed here to place the elements correctly on the imaginary z-axis. – KIKO Software Apr 17 '23 at 10:04
  • Yes I have started from this example you mention. Your solution is good but I would prefer one where the popover would not continue to scroll but stop at the bottom. – Ganbin Apr 17 '23 at 12:24
  • I don't understand what you mean by: _"the popover would not continue to scroll but stop at the bottom"_. – KIKO Software Apr 17 '23 at 12:38
  • In your example, when the popover reaches the bottom of the parent container, it disappear when we scroll, I would like its bottom to stay at the bottom of its parent container. – Ganbin Apr 17 '23 at 13:46

0 Answers0