Tether icon
Module Id
Group Id
Requires Jahia
Templating and extensions

Tether group_work

javascript absolutely positioning placement

A client-side library to make absolutely positioned elements attach to elements in the page efficiently.

This module only provides static assets. Please go to http://tether.io/docs/welcome/ for full info.

Tether is a small, focused JavaScript library for defining and managing the position of user interface (UI) elements in relation to one another on a web page. It is a tool for web developers building features that require certain UI elements to be precisely positioned based on the location of another UI element.

There are often situations in UI development where elements need to be attached to other elements, but placing them right next to each other in the DOM tree can be problematic based on the context. For example, what happens if the element we’re attaching other elements to is fixed to the center of the screen? Or what if the element is inside a scrollable container? How can we prevent the attached element from being clipped as it disappears from view while a user is scrolling? Tether can solve all of these problems and more.

Some common UI elements that have been built with Tether are tooltipsselect menusdropdown menus, and guided tours. Tether is flexible and can be used to solve all kinds of interesting problems; it ensures UI elements stay where they need to be, based on the various user interactions (click, scroll, etc) and layout contexts (fixed positioning, inside scrollable containers, etc).

Please have a look at the documentation for a more detailed explanation of why you might need Tether for your next project.

Dependencies & Dependants

  • NONE
  • NONE

Changelog 1.4.0

Update to v1.4.0


What is the version of Tether packaged?
This module provides the version 1.4.0

Do you plan to release new versions of this module?

How To Install

Download the module from your DX administration, then enable it for your website.

To use it from a jsp, you only need to include tether.min.js in your page:

<template:addResources type="javascript" resources="tether.min.js"/>