OSS探訪ページ内ナビ
概要
Tippy.jsはWeb向けのtooltip・popover・dropdown・menuを作るJavaScriptライブラリです。Popper 2を位置計算に使い、対象elementへcontentや表示optionを与えて浮動UIを追加します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
対象elementへtooltip・popoverを追加する
packageからtippyをimportし、対象selectorやelementへcontentとoptionを指定して浮動UIを作成します。標準CSSはtippy.js/dist/tippy.cssから読み込みます。
出典：[1]
Popper 2の配置計算を使って位置やoverflowを調整する
v6ではPopper.js v2へ更新され、placementやoverflow関連の詳細設定はpopperOptionsからPopper modifierとして渡す構成になっています。
出典：[2]
ARIAとinteractive stateをoptionから調整する
v6のaria optionはcontentとexpandedをobjectで設定でき、interactive状態に応じた既定値も持ちます。tooltipだけでなく操作可能なpopoverにも調整できます。
出典：[2]
向いている用途
button・icon・form controlへ補足説明や小さなpopoverを追加したい場合に向く
既存DOMを大きく変更せず、hover・focus・clickに応じた説明UIやmenu的なpopupを追加したい画面で使いやすい構成です。
出典：[1]
導入前の確認
HTML contentは既定で無効で、必要な場合だけallowHTMLを有効にする
v6ではXSS対策のためallowHTMLの既定値がfalseです。HTML文字列をcontentへ渡す場合だけ明示的にallowHTML: trueを設定し、信頼できないcontentを渡さないでください。
出典：[2]
参考にした公式資料
- [1]Tippy.js v6.3.7 README(2026-10-05)
- [2]Tippy.js v6 migration guide(2026-10-05)
- [3]Tippy.js v6.3.7 package metadata(2026-10-05)
- [4]Tippy.js v6.3.7 release(2026-10-05)
- [5]Tippy.js MIT license(2026-10-05)
編集部からの補足
少ないコードでtooltip・popoverを追加できる完成度の高いライブラリですが、リポジトリは現在archivedです。既存システムの保守では6.3.7の仕様確認に有用ですが、新規採用では保守中の代替と将来のbrowser互換性を比較してから選ぶのが安全です。
3ステップで試す
- 1
Tippy.js 6.3.7を導入する
repositoryがarchivedされているため、既存systemの再現用として最終releaseを固定します。
npm install --save-exact tippy.js@6.3.7 - 2
tippy本体とcore CSSを読み込む
READMEに従い、constructorと標準styleを読み込みます。
import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; - 3
対象elementへtooltipを追加する
button等の対象elementへtooltip contentを設定します。新規採用ではarchived状態を踏まえて保守中の代替候補とも比較してください。
tippy('#help-button', { content: '補足説明', });
成長
成長の推移 · 直近30日
12,240 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 0
- Open PR
- 11
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- tooltip
- popover
- menu
- combobox
- dropdown
- popup
- Stars
- 12,240
- Forks
- 539
- Watchers
- 1
- Open Issues
- 93
- Contributors
- 35
- 所有者種別
- User
- 主要言語
- JavaScript
- ライセンス
- MIT
- リポジトリ最終更新
- 2024/05/27
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- PhotoSwipe25,270 Stars
共通タグ 4件 · 同じ言語
画像ギャラリーをlightboxで拡大表示し、swipe・zoom・dynamic importをモバイルとデスクトップで扱う
JavaScript - Storybook91,200 Stars
共通タグ 4件
UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop
TypeScript - Expo52,566 Stars
共通タグ 4件
React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する
TypeScript - Uppy31,010 Stars
共通タグ 4件
ファイル選択UIと再開可能なアップロードをプラグインで組み合わせ、ローカル・リモートの取得元から送信する
TypeScript - Cropper.js13,902 Stars
共通タグ 4件
画像上の選択範囲を移動・拡縮し、ブラウザ内で切り抜き結果をCanvasとして取得する
TypeScript - React250,891 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
コンポーネントを組み合わせてWeb・ネイティブUIを構築するJavaScriptライブラリ
JavaScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。