tether

ui-component layout utility

'tether'はクライアントサイドライブラリで、ページ内の要素に絶対位置で配置された要素が効率的にアタッチされるようにするものです。これにより、様々なUIコンポーネントの位置を動的に調整できます。

Latest Ver

Homepage

Github

8,492

📢 'tether'はウェブページ内の要素を効率的にリンクし、位置を調整するライブラリです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 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'
});