tippy.js

tooltip ui-component animation

tippy.jsは、ウェブページにシンプルで効果的なツールチップを追加するための純粋なJavaScriptツールチップライブラリです。このライブラリは、ユーザーインターフェースの体験を向上させるために、さまざまなスタイリングオプションとアニメーション効果を提供します。

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