yup

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

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

1. Tooltipster

tooltip

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

名称 Tooltipster
言語 jQuery

2. Tippy.js

tooltip-1

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

名称 Tippy.js
言語 JavaScript

3. CSS Tooltip

tooltip-2

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

名称 CSS Tooltip
言語 CSS

4. Tipr

tooltip-3

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

名称 Tipr
言語 jQuery

5. Fade-in tooltip

tooltip-4

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

名称 Fade-in tooltip
言語 CSS

6. Grumble.js

tooltip-5

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

名称 Grumble.js
言語 jQuery

7. Protip

tooltip-6

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

名称 Protip
言語 jQuery

8. Tipped

tooltip-7

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

名称 Tipped
言語 JavaScript

9. Microtip

tooltip-8

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

名称 Microtip
言語 CSS

10. Automatic Tooltips

tooltip-9

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

名称 Automatic Tooltips
言語 JavaScript

11. JBox

tooltip-10

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

名称 JBox
言語 jQuery

12. Wenk

tooltip-11

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

名称 Wenk
言語 CSS

13. Crumble

tooltip-12

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

名称 Crumble
言語 jQuery

14. Intro.js

tooltip-13

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

名称 Intro.js
言語 JavaScript

15. PowerTip

tooltip-14

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

名称 PowerTip
言語 jQuery

16. Toolbar.Js

tooltip-15

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

名称 Toolbar.Js
言語 jQuery

17. Simptip

tooltip-16

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

名称 Simptip
言語 CSS

18. HubSpot Tooltip

tooltip-17

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

名称 HubSpot Tooltip
言語 JavaScript、CSS

19. Hopscotch

tooltip-18

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

名称 Hopscotch
言語 JavaScript

20. darktooltip

tooltip-19

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

名称 darktooltip
言語 jQuery

21. Tipso

tooltip-20

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

名称 Tipso
言語 jQuery

(原文:Katryna Balboni 翻訳:Asuka Nakajima)

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ