https://github.com/dy/placer
Place any element relative to any other element the way you define
https://github.com/dy/placer
adjust floating-ui nanopop popper popup positioning satellite tether
Last synced: 5 months ago
JSON representation
Place any element relative to any other element the way you define
- Host: GitHub
- URL: https://github.com/dy/placer
- Owner: dy
- License: unlicense
- Created: 2014-08-26T11:49:04.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T17:14:38.000Z (about 2 years ago)
- Last Synced: 2024-12-29T00:12:23.466Z (5 months ago)
- Topics: adjust, floating-ui, nanopop, popper, popup, positioning, satellite, tether
- Language: JavaScript
- Homepage: https://dy.github.io/placer
- Size: 194 KB
- Stars: 10
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# Placer
Place any two DOM elements in a way you like. Mainly needed for dropdowns, tooltips, modals, notifiers and any kind of overlays.
[Demo & tests](https://dy.github.io/placer)
## Usage
[](https://npmjs.org/package/placer/)
```js
var place = require('placer');
place(element, {
target: otherElement,
side: 'top',
align: 'left',
within: '.holder'
})
```
## Options
| Parameter | Default | Description |
|----|:---:|----|
| `target` | `window` | An area to align element relative to. |
| `side` | `undefined` | The side to place element: 'center', 'top', 'left', 'bottom', 'right' or 'auto'. |
| `align` | `'left'` | Alignment, 0..1 or one of the sides keywords. |
| `within` | `window` | Restriction area. |
## Alternatives
* [adjust](https://www.npmjs.com/package/adjust)
* [tether](https://github.com/HubSpot/tether)
* [positions](https://github.com/QubitProducts/positions)
* [positionining](https://github.com/mattlewis92/positioning#readme)
* [popper](https://popper.js.org/)
* [satellite](https://github.com/jkroso/satellite)
* [nanopop](https://github.com/Simonwep/nanopop)
* [floating-ui](https://github.com/atomiks/floating-ui)