afb-client/bower_components/tether/docs/1-Overview/1-why_you_should_use_tether.md

   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