tether

What is tether?

The 'tether' npm package is a JavaScript library for efficiently positioning elements on a web page. It allows you to attach elements to other elements, ensuring that they stay in the correct position even when the page is scrolled or resized.

What are tether's main functionalities?

Basic Tethering

This feature allows you to attach an element (e.g., a tooltip) to another element (e.g., a button). The 'attachment' and 'targetAttachment' properties define how the elements are positioned relative to each other.

const Tether = require('tether');

const tether = new Tether({
  element: document.querySelector('#tooltip'),
  target: document.querySelector('#button'),
  attachment: 'top left',
  targetAttachment: 'bottom left'
});

Constraints

This feature allows you to add constraints to the tethered element, ensuring it stays within the bounds of a specified container (e.g., the window). The 'constraints' property takes an array of constraint objects.

const Tether = require('tether');

const tether = new Tether({
  element: document.querySelector('#tooltip'),
  target: document.querySelector('#button'),
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [{
    to: 'window',
    attachment: 'together'
  }]
});

Offset

This feature allows you to specify an offset for the tethered element. The 'offset' property takes a string with the horizontal and vertical offsets.

const Tether = require('tether');

const tether = new Tether({
  element: document.querySelector('#tooltip'),
  target: document.querySelector('#button'),
  attachment: 'top left',
  targetAttachment: 'bottom left',
  offset: '10px 20px'
});

Other packages similar to tether

popper.js

Popper.js is a library used to manage poppers in web applications. It provides more advanced positioning capabilities compared to Tether, including support for flipping, boundaries, and more complex positioning strategies.

position.js

Position.js is a lightweight library for positioning elements relative to other elements. It offers basic positioning functionalities similar to Tether but with a simpler API and fewer features.

floating-ui

Floating UI is a library for creating floating elements such as tooltips, popovers, and dropdowns. It offers a comprehensive set of features for positioning and managing floating elements, making it a more feature-rich alternative to Tether.

README

Tether

Tether is a javascript library for efficiently making an absolutely positioned element stay next to another element on the page.

It aims to be the canonical implementation of this type of positioning, such that you can build products, not positioning libraries.

Take a look at the documentation for a more detailed explanation of why you should star it now to remember it for your next project.

Demo & Documentation