Tether is a javascript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.
Tether includes the ability to constrain the element within the viewport, it’s scroll parent, any other element on the page, or a fixed bounding box. When it exceedes those constraints it can be pinned to the edge, flip to the other side of it’s target, or hide itself.
Tether optimizes it’s location placement to result in the minimum amount of ‘jankyness’ as the page is scrolled and resized. The page can maintain 60fps scrolling even with dozens or hundreds of tethers on screen (pop open the devtools timeline as you scroll this page). Tether is 5kb minified and gzipped, and supports IE9+, and all modern browsers.
By default tether positions elements using CSS transforms. These transforms allow the tethered element to be moved as it’s own layer to not force a repaint of the underlying page. This method of positioning can cause some issues however, including color shifts and artifacts.
[button color=”black” size=”medium” link=”http://github.hubspot.com/tether/” target=”blank” ]Tether[/button]
