Examples

It’s our goal to create a wide variety of example of how Tether can be used. Here’s what we have so far, please send a PR with any examples you might create.

Beginner

  • simple: A simple example to get you started
  • out-of-bounds: How to hide the element when it would otherwise be offscreen
  • pin: How to pin the element so it never goes offscreen
  • enable-disable: How to enable and disable the Tether in JavaScript

Advanced

  • content-visible: Demonstrates using the 'visible' targetModifier to align an element with the visible portion of another.
  • dolls: A performance test to show several dozen elements, each tethered to the previous. Try dragging the top left tether.
  • element-scroll: Demonstrates using the 'scroll-handle' targetModifier to align an element with the scrollbar of an element.
  • scroll: Demonstrates using the 'scroll-handle' targetModifier to align an element with the body’s scroll handle.
  • viewport: Demonstrates aligning an element with the viewport by using the 'visible' targetModifier when tethered to the body.