tether

ui-component layout utility

Tether is a client-side library designed to make absolutely positioned elements attach to elements in the page efficiently. It helps in dynamically positioning UI components relative to other elements.

Latest Ver

Homepage

Github

8,492

📢 Tether is a library for efficiently linking and positioning elements within web pages.

CDN Download

License: MIT

Asset Type :

View All Versions

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div id='target'>
  <h2>Target Element</h2>
</div>
<div id='tooltip'>
  <p>This is a tooltip</p>
</div>

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/tether@1.4.7/dist/js/tether.min.js"></script>

⚙️ JavaScript
var targetElement = document.getElementById('target');
var tooltip = document.getElementById('tooltip');
new Tether({
  element: tooltip,
  target: targetElement,
  attachment: 'top middle',
  targetAttachment: 'bottom middle'
});