https://github.com/unoforge/flexipop
An ultra-compact positioning engine
https://github.com/unoforge/flexipop
dropdown popover popper positioning-engine tooltip
Last synced: 10 months ago
JSON representation
An ultra-compact positioning engine
- Host: GitHub
- URL: https://github.com/unoforge/flexipop
- Owner: unoforge
- Created: 2024-09-18T15:39:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-11T20:53:58.000Z (10 months ago)
- Last Synced: 2025-08-11T22:26:24.466Z (10 months ago)
- Topics: dropdown, popover, popper, positioning-engine, tooltip
- Language: TypeScript
- Homepage:
- Size: 579 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flexipop
An ultra-compact positioning engine inspired by [Nanopop](https://www.npmjs.com/package/nanopop), but we decided to create our own solution. The main reason? We wanted something tailored specifically to our [library's](https://github.com/unify-ui-dev/flexilla) needs, while also taking the opportunity to learn new techniques and improve our problem-solving skills.
This library thrives on simplicity and efficiency.
> [!IMPORTANT]
> This package is a part of the `flexilla` library's ecosystem.
## When to opt for FLEXIPOP over PopperJS?
If you are considering `flexipop` over `PopperJS`, it's likely due to similar reasons as [Nanopop](https://github.com/simonwep/nanopop/tree/master).
Choose `FLEXIPOP` for a small, powerful, and efficient positioning solution.
## Usage
Installation
```bash
npm i flexipop
```
Usage
```js
import { CreatePopper } from 'flexipop'
new CreatePopper(
referenceElement,//HTMLElement
popperElement,//HTMLElement
{
// options here
}
)
```
### HTML Markup
```html
Left-start
```
### CSS
> ⚠ The popperElement must have set `position` to `fixed`.
```css
[data-popper-el] {
position: fixed;
left : var(--fx-popper-placement-x, 0px);
top : var(--fx-popper-placement-y, 0px);
}
```