WebAppers

/ best free open source web resources /

Shopify

Make Absolutely Positioned Elements with Tether

Posted · Category: MIT License, Tooltips

Tether is a javascript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.

Tether includes the ability to constrain the element within the viewport, it’s scroll parent, any other element on the page, or a fixed bounding box. When it exceedes those constraints it can be pinned to the edge, flip to the other side of it’s target, or hide itself.

Tether optimizes it’s location placement to result in the minimum amount of ‘jankyness’ as the page is scrolled and resized. The page can maintain 60fps scrolling even with dozens or hundreds of tethers on screen. Tether is 5kb minified and gzipped, and supports IE9+, and all modern browsers.

tether

Requirements: JavaScript Framework
Demo: http://github.hubspot.com/tether/
License: MIT License

2 Comments
  • Zack Bloom

    I’m one of the creators of Tether, thanks for featuring it!

    It’s actually MIT licensed, which, I believe, is better than not having a license at all, as it explicitly lets you do whatever you want.

  • http://www.webappers.com/ WebAppers

    It has been fixed. :)

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons