https://github.com/ambar/position.js

Positions a popup element to an anchor element 😉
https://github.com/ambar/position.js

overlay popup position positioning tooltip

Last synced: about 1 month ago
JSON representation

Positions a popup element to an anchor element 😉

• Host: GitHub
• URL: https://github.com/ambar/position.js
• Owner: ambar
• License: mit
• Created: 2017-01-12T14:39:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-12-10T15:11:25.000Z (over 1 year ago)
• Last Synced: 2025-04-23T05:47:06.992Z (about 1 month ago)
• Topics: overlay, popup, position, positioning, tooltip
• Language: TypeScript
• Homepage: https://ambar.li/position.js/
• Size: 1.68 MB
• Stars: 12
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# position.js

Positions a popup element to an anchor element 😉

[![npm version](https://badgen.net/npm/v/position.js)](https://www.npmjs.com/package/position.js)

[![minzipped size](https://badgen.net/bundlephobia/minzip/position.js)](https://bundlephobia.com/result?p=position.js)

[![Greenkeeper badge](https://badges.greenkeeper.io/ambar/position.js.svg)](https://greenkeeper.io/)

## Demo

[position.js](http://ambar.li/position.js/)

## Usage

```js

const {

  placement, // actual placement

  popupOffset, // CSS position: {left, top}

  arrowOffset, // CSS position: {left, top}

  popupRect,

  anchorRect,

} = position(popup, anchor, 'top', options)

// DOM

Object.assign(popup.style, popupOffset)

// React

```

## API

`position(popup, anchor, placement, options)`

### Options

```js

{

  // use fixed or absolute position, defaults to false

  fixed: false,

  // any scroller element, defaults to document.body

  offsetParent: document.body,

  // 'auto': adjusts horizontally or vertically, 'both': adjusts horizontally and vertically, defaults to 'none'

  adjustXY: 'none',

}

```

### Placement Presets

- `top`

- `right`

- `bottom`

- `left`

- `center`

- `top-left`

- `top-right`

- `right-top`

- `right-bottom`

- `bottom-left`

- `bottom-right`

- `left-top`

- `left-bottom`

### Placement Combos

```

position(popup, anchor, {popup: 'left-top', anchor: 'right-top'})

// same as `right-top` placement

position(popup, anchor, 'right-top')

```