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.