Core Concepts

ElementPopper wraps around your reference and popper elements in several containers that you need to know the arrangement of that containers to better design your layout.

  • The first container has an inline-block display that wraps all the reference, popper and arrow (if enabled) elements together and is used to get the left and top value of the reference element.
  • The second container has absolute position with top and left value equal to zero, which is used to position the popper in the document by setting its transform value.
  • Finally, the last container with a static position that includes the popper element and is used to get the exact amount of width and height of the popper element.

container with inline-block display

Refrence Element

Arrow (optional)

container with absolute position

container with static position

Popper Element

top-start
top-end
top-center
left-start
left-center
left-end
right-start
right-center
right-end
bottom-center
bottom-end
bottom-start

Reference and Popper Larger Than Parent

center
-
Refrence Element

If the width or height of the reference plus popper elements is greater than the parent element, the main position of the popper will be changed if center of the reference element has passed through the middle of the parent element.

The condition is for that Popper always be in the part of it's 'scrollable' parent element('s) that has more space and it is considered only when the edge of the popper element has not reach the edge of the visible document.

Important Notes

  1. The most important thing is that this library only tries to be in the position you specified! This is because the arrangement of the elements containing the refrence element may be such that the popper does not fit in that position, or the user may start scrolling or resizing the page, in which case the popper position will change. Of course, you can force the element popper to show the popper position exactly where you want it, in which case you should use the fixMainPosition and fixRelativePosition properties.
  2. Do not use margin and padding to make space between the popper and the refrence element, and instead use the offsetY and offsetX properties.
  3. Do not try to change the element popper container position to relative with CSS or Style, because it will disrupt the calculations.
  4. Set the fixMainPosition to true to fix the main position and the fixRelativePosition to true to fix the relative position.
  5. If you want to change the size of the refrence element, please set the box-sizing to border-box.
  6. If the parent element has flex position, and flex-direction is column, it is better to define the width for element popper container.