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