Tether – Marrying elements for life
Description: Tether is a JavaScript and CSS library. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).

# Tether ## Marrying elements for life ★ On Github

## What is Tether? ## How Tether works. ## Tether is powerful. ## Play with Tether

Tether is a low-level UI library that can be used to position any element on a page next to any other element. It can be used for dropdown menus, tooltips, popovers, tours, help information, scroll guides, autocompletes, etc. The possibilities are endless. In this example we're showing an action menu tethered to a list item.

Tether works by creating an absolutely positioned element and meticulously tracking the movements of a target which you specify. The target and element can be tethered together in a variety of different ways. Notice how the tethered element stays tethered to its target list item even as the left pane is scrolled up and down.

Tether can keep your element positioned properly even in some tough situations. Tether handles all of the common pain points: Automatically detect collisions with the edge of the page or edge of the scrollParent Automatically reposition on browser resize, scroll, and other events, Constrain the position to any bounding box, ...and a lot more.

Interact with this demo. To learn more, check out our documentation.

# Tether Family ## These projects are all powered by Tether's positioning engine. # Drop Create dropdowns, popovers, and more. # Tooltip Stylable tooltips built on Tether. # Select Stylable select elements built on Tether. # Shepherd Guide your users through a tour of your app.

# Share ## Help us spread the word. Tweet