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.
