tackjs

A simple toolkit to pin an element relative to another element.

Usage no npm install needed!

<script type="module">
  import tackjs from 'https://cdn.skypack.dev/tackjs';
</script>

README

tackjs

Tiny utility to position an element absolutely in relation to another element. 500b gzipped.

What's this for? Think popovers, modals, tooltips, scroll-jacking, etc.

Install

npm i tackjs --save

Usage

Usage is very straightfoward. Think, "pin element to target at the top":

import tack from 'tackjs'

const element = document.querySelector('...')
const target = document.querySelector('...')

const pin = tack(element, target, 'top')

To update the position – say after the window resizes – use update:

pin.update()

If you need to un-pin and remove all styles:

pin.destroy()

But don't worry! It can be re-pinned as well:

pin.update()

N.B. tackjs also adds an .is-tacked class to all pinned elements.

Alignment

Tack supports the following coordinates relative to the passed target element:

  • top
  • bottom
  • left
  • right
  • topLeft
  • topRight
  • bottomLeft
  • bottomRight

License

MIT License © Eric Bailey