https://github.com/matthewmueller/adjust

Position elements next to each other. A light-weight version of HubSpot/tether.
https://github.com/matthewmueller/adjust

Last synced: 16 days ago
JSON representation

Position elements next to each other. A light-weight version of HubSpot/tether.

• Host: GitHub
• URL: https://github.com/matthewmueller/adjust
• Owner: matthewmueller
• Created: 2015-08-20T00:42:40.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-05T16:41:58.000Z (about 8 years ago)
• Last Synced: 2024-10-14T16:33:22.667Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 36
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# adjust

  Light-weight version of [HubSpot/tether](https://github.com/HubSpot/tether).

## Features

Supports all the [main features of tether](http://github.hubspot.com/tether/overview/why_you_should_use_tether/):

- Optimized GPU-accelerated repositioning for 60fps scrolling

- Reliable positioning on any possible corner, edge or point in between.

- Support for repositioning or pinning the element when it would be offscreen

- Designed to be embeddable in other libraries

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.

## Usage

```js

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

  }

})

```

## Installation

```

npm install adjust

```

## License

MIT