Position elements next to each other. A light-weight version of HubSpot/tether.
Light-weight version of HubSpot/tether.
Supports all the main features of tether:
It does differ from tether in a few key ways:
File size: Adjust is 16kb unminified, tether is 50kb unminified. The Adjust codebase is also modularized allowing you to reuse modules throughout the codebase and reduce the footprint added even further.
Less Mucking: Unlike Tether, Adjust does not change the DOM tree. Moving DOM nodes often leads to unintended consequences. I find that it's much easier to modify the DOM structure manually than have a library try and pick a structure for you.
Less Features: Tether has some additional options around constraints and pinning. It also does more to try and optimize location placement. Some of these things may get added as needed, but the goal is to build higher-level tooltips and dropdowns, without being concerned with the added filesize.
var tooltip = document.querySelector('.tooltip')
var target = document.querySelector('.target')
var adjust = require('adjust')()
adjust(tooltip, target, {
attachment: 'bottom middle'
target: 'top middle',
offset: {
y: 10
}
})
npm install adjust
MIT