position-element

position-element

A simple function for positioning one DOM element relative to another DOM element (anchor element).

It is useful for implementing something like tooltips, dropdown/popups with support for these features:

1. Automatically reposition element with best alternative placement if element renders out of browser view port.
2. Supports 12 placements options.

• up-left, up-center, up-right
• down-left, down-center, down-right
• left-top, left-middle, left-bottom
• right-top, right-middle, right-bottom

1. Customizable distance and offset

Example

import positionElement from 'position-element';

const config = {
  element: document.getElementById('subject'),
  anchorElement: document.getElementById('anchor'),
  preferredPlacement: 'down-center',
  distance: 10,
  alignmentOffset: 0,
  autoReposition: true,
};

positionElement(config);

Live demo

demo.html

Tips

1. positionElement will do the measurement and set element's position: absolute, left and top style for you.
2. However, it is important for you to set the right position style (e.g. position:relative ) for the common container of both the anchor element and the positioning element.