| 1 | ## Why You Should Use Tether
|
| 2 |
|
| 3 | Virtually every app includes some sort of overlay attached to an element on the page.
|
| 4 | Things like [tooltips](http://github.hubspot.com/tooltip/docs/welcome),
|
| 5 | [dropdowns](http://github.hubspot.com/select/docs/welcome), [hover-activated info boxes](http://github.hubspot.com/drop/docs/welcome), etc.
|
| 6 |
|
| 7 | Those elements need to be attached to something on the page. Actually placing them next to
|
| 8 | the element in the DOM causes problems though, if any parent element is anything
|
| 9 | but `overflow: visible`, the element gets cut off. So you need absolute positioning
|
| 10 | in the body.
|
| 11 |
|
| 12 | Some of the time absolute positioning is right, but what about if the thing we're
|
| 13 | attached to is fixed to the center of the screen? We'll have to move it every
|
| 14 | time the user scrolls. What about if the element is in a scrollable container,
|
| 15 | if the overlay is inside of it (so no clipping), it would be cool if the code
|
| 16 | were smart enough to move it inside when that area is scrolled. That way we
|
| 17 | need to reposition it even less.
|
| 18 |
|
| 19 | It would also be nice if the code could somehow figure out whether positioning it
|
| 20 | from the top, bottom, left, or right would result in the fewest repositionings
|
| 21 | as the user scrolls or resizes.
|
| 22 |
|
| 23 | Most of the time you're building these elements it would be nice for the element to
|
| 24 | flip to the other side of the element if it hits the edge of the screen, or a scrollable
|
| 25 | container it might be in. It would be nice if we could confine the element
|
| 26 | to within some area, or even hide it when it leaves.
|
| 27 |
|
| 28 | It would be nice for the element to be repositioned with CSS transforms
|
| 29 | rather than top and left when possible, to allow the positioning to be done entirely
|
| 30 | in the GPU.
|
| 31 |
|
| 32 | Now that the positioning is so fancy, you're going to use it for more and more
|
| 33 | elements. It would be cool if the library could optimize all of their repositioning
|
| 34 | into a single repaint.
|
| 35 |
|
| 36 | All of that is baked into Tether.
|
| 37 |
|
| 38 | ### tl;dr
|
| 39 |
|
| 40 | - Optimized GPU-accelerated repositioning for 60fps scrolling
|
| 41 | - Reliable positioning on any possible corner, edge or point in between.
|
| 42 | - Support for repositioning or pinning the element when it would be offscreen
|
| 43 | - Designed to be embeddable in other libraries
|