Автор Tether это – JavaScript библиотека, которая служит для закрепления положения абсолютно позиционированного элемента (прикрепляемого элемента) относительно другого элемента на странице. Например, это может быть всплывающая подсказка (tooltip) или диалог, которые отображаются над, под, слева или справа от определенного элемента (элемент-цель).
Tether оптимизирует число операций по перемещению прикрепляемого элемента при прокуртке или изменении размеров страницы. Так что страница даже с сотней таких элементов не должна тормозить, по заверениям разработчиков.
Занимает примерно 5kb в минифицированном и сжатом виде и поддерживает IE9+ и все современные брайзеры.
Чем можно указать при привязке элементов друг к другу?
Во-первых указываются точка привязки прикрепляемого элемента и точка привязки элемента-цели. Точки указываются с помощью ключевых слов: left, center, right, top, middle, bottom. Например, “top right” – это верхний правый угол элемента (блока).
Во-вторых можно указать отступ (расстояние между привязанными точками. Отступ указывается по двум осям.
И в-третьих Tether включает возможность ограничивать (удерживать) прикрепляемый элемент внутри некоторой области. Если пользователь прокручивает контент так, что прикрепляемый элемент (пытаясь следовать за элементом-целью) скрывается из нужной области, то прикрепляемый элемент может быть прижат к низу области, может быть перекинуть на другой край элемента-цели или вовсе скрыт.
Конечно, вся эта магия прикленных и плавающих блоков основана на css-свойствах position и z-index. Поэтому в некторых случаях, если в весртке уже используется указание position или z-index библиотека может давать сбои. Это необходиом учитывать.
Понятно, что такая библиотека это – инструмент помогающий добавить возможность привязки к нужным элементам какого-нибудь виджета. Поэтому она используется как вспомогательный код для создания визуальных компонентов.
Например, есть прекрасная библиотека Shepherd, которая позволяет создавать туры новичка для ваших сайтов. Это такая эффектная последовательность всплывающих подсказок и диалогов с подсветкой областей вашего сайта. На каждом шаге появляется подсказка со стрелочкой, которая содержит описание. При этом указывая на некоторую область вашего сайта подсвечивая ее.