tippy.js

tooltip ui-component animation

tippy.js는 순수 자바스크립트로 작성된 툴팁 라이브러리로, 웹 페이지에 간단하고 효과적인 툴팁을 추가할 수 있습니다. 이 라이브러리는 사용자의 인터페이스 경험을 향상시키기 위해 다양한 스타일링 옵션과 애니메이션 효과를 제공합니다.

Latest Ver 6.3.7

Homepage

Github

12,168

가볍게 터치하면, 통찰이 시작된다.

tippy.js로 사용자 경험을 향상시키며, 매력적인 툴팁으로 정보를 전달하세요.

tippy.js는 간단한 API와 다양한 커스터마이징 옵션을 제공하는 라이트웨이트 툴팁 라이브러리입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.cjs.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.cjs.min.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.esm.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective-extreme.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective-extreme.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective-subtle.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective-subtle.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/perspective.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale-extreme.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale-extreme.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale-subtle.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale-subtle.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/scale.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away-extreme.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away-extreme.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away-subtle.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away-subtle.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-away.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward-extreme.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward-extreme.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward-subtle.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward-subtle.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/animations/shift-toward.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/backdrop.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/backdrop.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/border.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/border.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/svg-arrow.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/svg-arrow.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light-border.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light-border.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/material.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/material.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/translucent.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/translucent.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.js.map

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js.map

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.cjs.js.map

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.esm.js.map

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.js.map

https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.min.js.map

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<button id='myButton'>Hover over me!</button>

🧩 External JS
<script src="https://unpkg.com/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script>

⚙️ JavaScript
tippy('#myButton', {
  content: 'Tooltip text',
  placement: 'top'
});