shipshapecode/tether

★ 8,489JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Tether))
    What it does
      Element positioning
      Anchor pop-ups
      Scroll-stable
    Use cases
      Tooltips
      Dropdown menus
      Autocomplete popups
      Select menus
    How it works
      Target element
      Attached element
      Edge alignment
    Setup
      npm install
      One JS file
      No framework needed

mindmap root((Tether)) What it does Element positioning Anchor pop-ups Scroll-stable Use cases Tooltips Dropdown menus Autocomplete popups Select menus How it works Target element Attached element Edge alignment Setup npm install One JS file No framework needed

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Attach a tooltip to a button that stays in the correct position when the user scrolls through a long page.

USE CASE 2

Build a dropdown menu that opens right below its trigger element and stays aligned across different screen sizes.

USE CASE 3

Create an autocomplete suggestion popup that stays anchored to a search input field as the user types.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

MIT license, use, modify, and distribute freely in any project including commercial ones.

In plain English

Tether is a small JavaScript library that helps web developers position pop-up elements on a page, such as tooltips, dropdown menus, and comment boxes, so they stay anchored next to whatever triggered them. Originally created by HubSpot and now maintained by a consulting firm called Ship Shape, it is available as an open-source tool under the MIT license. The problem Tether solves is a common frustration in web development. When you want to show a small box right next to a button or image, getting it to stay exactly there across different screen sizes, scrollable areas, and browser quirks is harder than it sounds. Standard CSS positioning tools can cause elements to jump to unexpected locations or get clipped when a user scrolls. Tether handles all that math automatically. You use it by pointing Tether at two elements: the target (the thing you want to attach to, like a photo) and the element you want to position next to it (like a comment box). You also specify which edges should line up, for example top-right of the comment box to top-left of the photo. Tether then keeps those two elements aligned no matter what the user does, including resizing the browser window. Common use cases listed in the README include tooltips, dropdown menus, autocomplete popups, and select menus. The library is small and focused, meaning it does positioning and nothing else. You include one JavaScript file in your project, configure a few options, and Tether takes over the positioning logic. Installation is through npm, a standard package manager for web projects, or by downloading a file directly from the releases page. The README includes working code examples and links to interactive demos and full documentation at tetherjs.dev.

Copy-paste prompts

Prompt 1

Using Tether.js, attach a tooltip div to a button so the top-left corner of the tooltip aligns to the bottom-right corner of the button, show me the full JavaScript configuration.

Prompt 2

How do I use Tether to create a dropdown menu that stays attached to its trigger button when the user scrolls down the page?

Prompt 3

Set up Tether with npm in a React component to position a custom select menu dropdown directly below its input field.

Prompt 4

What Tether options or constraints should I use to prevent a tooltip from going off-screen on small mobile viewports?

Prompt 5

How do I destroy a Tether instance and clean up its event listeners when removing a component from the page?

Open on GitHub → Explain another repo

← shipshapecode on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.