tooltipster

tooltip ui-component

Tooltipster는 jQuery 기반의 툴팁 플러그인입니다. 이 플러그인은 웹 페이지 내 요소에 대한 부가 정보를 제공하는 툴팁을 쉽게 추가하고 관리할 수 있게 해줍니다. Tooltipster는 사용자 친화적인 디자인과 다양한 커스터마이징 옵션을 제공하여, 웹 개발자가 효과적으로 툴팁을 구현할 수 있도록 돕습니다.

Latest Ver 4.2.8

Homepage

Github

2,752

📢 Tooltipster는 jQuery를 사용하여 웹 요소에 툴팁을 추가하는 플러그인입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/plugins/tooltipster/SVG/tooltipster-SVG.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.main.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.main.min.js

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.min.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.main.css

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.main.min.css

Sample Code

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

📄 HTML
<div class="tooltip" title="Tooltip Content">Hover over me!</div><script>$(document).ready(function() {$('.tooltip').tooltipster();});</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js"></script>

⚙️ JavaScript
$(document).ready(function() {$('.tooltip').tooltipster();});