CSS/jQuery/JavaScriptで作られた無料ツールチッププラグイン21選

「ツールチップ」とは、ボタン等にカーソルをあわせることで表示される”小さな吹き出し”のことです。吹き出しによる補足情報でユーザーの理解を助けてくれる、便利な存在ですね。

今回はCSS / jQuery / JavaScriptで作られた、オープンソースのツールチッププラグインを21個、それぞれの特徴とともにご紹介します。すべて無料で簡単に使えるので、ぜひ活用してみてください。

1. Tooltipster

多くのインタラクションやテーマ、トリガーを備えており、クリーンでモダンなツールチップが作成できます。

2. Tippy.js

多くのインタラクションやアニメーション、テーマを備えており、カスタマイズ性も高いツールチップ。HTMLが使用でき、ドロップダウンリストやカーソル追従などの機能も付いています。

3. CSS Tooltip

HTMLとCSSで作られていつツールチップ。アニメーションが滑らかでおしゃれです。

4. Tipr

ほぼすべてのHTML要素に表示でき、小ぶりかつシンプルで使いやすいツールチップです。

5. Fade-in tooltip

フェードインアニメーションに特化した、シンプルなツールチップです。

6. Grumble.js

アニメーションつきの、丸型吹き出しツールチップ。特定の要素に対して、任意の角度で設置可能です。

7. Protip

複数のスキン、配置、アニメーションを備えているツールチップ。汎用性の高いデザインのため、さまざまな場面で活用が期待されます。

8. Tipped

シンプルなツールチップ。複数のスキン、サイズ、インタラクションオプションを備えています。

9. Microtip

モダンでミニマルなデザインの、軽量なツールチップライブラリ。

10. Automatic Tooltips

自動でツールチップが配置されるプラグイン。柔軟なカスタマイズも可能です。

11. JBox

モーダルウィンドウと通知機能を備えた、強力で柔軟なプラグイン。レスポンシブで軽量かつ、カスタマイズも可能です。

12. Wenk

軽量なツールチップ。属性やクラスを使って、簡単に設定できます。

13. Crumble

ユニークな形の、オンボーディング（チュートリアル）に特化したインタラクティブなツールチップ。なお、使用にはGrumble.jsが必要です。

14. Intro.js

オンボーディング（チュートリアル）のための、パワフルで多用途なツールチップです。環境に依存せず、ユーザーフレンドリーなのが特徴。

15. PowerTip

一度にひとつの吹き出ししか表示しないように設計された、優秀なツールチップ。複雑なデータの追加もサポートしています。

16. Toolbar.Js

WebアプリやWebサイト向けの、ツールチップ風のツールバーが作成できるプラグインです。

17. Simptip

Sassで作成された、かっこいいCSSツールチップです。

18. HubSpot Tooltip

カスタマイズ可能な、ツールチップを作るためのライブラリ。TetherとDropを土台に構築されている。

19. Hopscotch

複数ページにわたるオンボーディングを含む、プロダクトチュートリアルのためのフレームワーク。JSONオブジェクトを入力として受け入れることで機能します。開発者がレンダリングをコントロールするためのAPIも提供されています。

20. darktooltip

HTMLコンテンツをサポートする、シンプルかつカスタマイズ性の高いツールチップです。

21. Tipso

CSS3アニメーションを備えた、軽量でレスポンシブなjQueryツールチッププラグイン。Wordpressプラグインとしても非常に優秀です。

（原文：Katryna Balboni　翻訳：Asuka Nakajima）

こちらもおすすめ！▼