1. Docs
  2. Popper

Flexipop - Positioning Engine for Flexilla

Flexipop is a lightweight and efficient positioning engine tailored for Flexilla, offering seamless popper-like functionality with minimal overhead.

Installation

Install Flexipop via npm: 
npm i flexipop

Basic Usage

To use Flexipop, you simply need to create an instance of CreatePopper, passing the reference element and the popper element along with any custom options you may require: 
import { CreatePopper } from 'flexipop';

new CreatePopper(
  referenceElement,  // The element relative to which the popper will be positioned (HTMLElement)
  popperElement,     // The popper element to be positioned (HTMLElement)
  {
    // options here
  }
);

Example HTML Markup 

<div data-reference-el></div>
<div data-popper-el>Left-start</div>
Note: The popperElement should have its position set to fixed.
Bottom

Required Styles for the popperElement 

.myPopper{
  position: fixed;
  top: var(--fx-popper-placement-y);
  left: var(--fx-popper-placement-x);
}

Usage with position: absolute

Flexipop also supports poppers with position: absolute. This version is useful when the reference and popper elements are within the same container, and you need the popper to behave according to the flow of the containing element.

Installation for Absolute Positioning 

import { UseCreatePopperAbsolute as CreatePopper } from 'flexipop/with-absolute';

new CreatePopper(
  referenceElement,  // The reference element (HTMLElement)
  popperElement,     // The popper element (HTMLElement)
  {
    // options here
  }
);

Requirements

  • The popperElement must have its position set to absolute.
  • Both the referenceElement and popperElement should be in the same parent container.
  • The parent container must have its position set to relative.

Example HTML Markup for Absolute Positioning 

<div class="relative-container" style="position: relative;">
  <div data-reference-el></div>
  <div data-popper-el>Absolute popper</div>
</div>
  • CSS 
.myPopper{
  position: absolute;
  top: var(--fx-popper-placement-y);
  left: var(--fx-popper-placement-x);
}
Important: Be sure that the parent container has position: relative, and the popperElement has position: absolute.

Options

The options provided to Flexipop help control how your popper is positioned. You can set placement, offsets, and more to adjust its behavior.

Available Options

  • placement: Defines the position of the popper relative to the reference element (top, bottom, left, right, with alignment options like -start, -end,-middle).
    Example: 
    new CreatePopper(referenceElement, popperElement, { placement: 'bottom-end' });
  • offsetDistance: Adds a specific distance (in pixels) between the reference and popper elements.