An ultra-compact positioning engine inspired by Nanopop, but we decided to create our own solution. The main reason? We wanted something tailored specifically to our library's needs, while also taking the opportunity to learn new techniques and improve our problem-solving skills.

This library thrives on simplicity and efficiency.

If you are considering flexipop over PopperJS, it's likely due to similar reasons as Nanopop.

Choose FLEXIPOP for a small, powerful, and efficient positioning solution.

Installation

npm i flexipop

Usage

import { CreatePopper } from 'flexipop'

new CreatePopper(
    referenceElement,//HTMLElement
    popperElement,//HTMLElement
    {
    //   options here
    }
  )

<div data-reference-el></div>
<div data-popper-el>Left-start</div>

⚠ The popperElement must have set position to fixed.

[data-popper-el] {
    position: fixed;
    left    : var(--fx-popper-placement-x, 0px);
    top     : var(--fx-popper-placement-y, 0px);
}