position.js

position.js

Positions a popup element to an anchor element 😉

Demo

position.js

Usage

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
<Popup style={popupOffset} arrowOffset={arrowOffset} placement={placement} />

API

position(popup, anchor, placement, options)

Options

{
  // 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')

Changelog

1.1.0 (2023-12-10)

Features

• add boundary option (25fdd99)
• add types, export Rect/Point (6ba1145)