Flexipop

Warning

Repository Archived: This repository has been moved to flexilla as a package. Please use the flexipop package from the flexilla repository instead.

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.

When to opt for FLEXIPOP over PopperJS?

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.

Usage

Installation

npm i flexipop

Usage

import { CreatePopper } from 'flexipop'

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

HTML Markup

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

CSS

⚠ 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);
}