CSS、JavaScript、およびjQueryを使用した40を超える便利なツールチップスクリプト
興味深いUI要素であるツールチップ（情報ヒントとも呼ばれます）を使用すると、小さなボックスが表示されます。 マウスカーソルが情報のある特定のテキストまたは画像の上にある ホバーされている要素に関して。ユーザーエクスペリエンスの点では、ツールチップはユーザーに最も迅速で簡単な情報源を提供します。 何もクリックせずに.
テキストにツールチップを追加する最も簡単な方法はHTMLタグを使用することですが またはTITLE =””, ALT =””. しかし、いくつかの本当にクールがあります JavaScriptとCSSで作成できるツールチップのデザインとスタイル ツールチップスクリプトを使用する。見てみましょう.
CSS
Balloon.css - バルーンはCSSライブラリです SasSとLESSで構成 対話型のツールチップを表示します。ツールチップの内容と位置は、次の方法で設定できます。 データ- 属性。ツールチップは左、右、または左右に表示できます。できます コンテンツに絵文字を追加する. Balloon.cssは、NPMを介してインストールすることも、CDNJSからロードすることもできます。.
シンプティプ - SasSを使って実現 要件に合わせてコードを再設定して再コンパイルします。. ツールチップの位置と内容は、クラス名と データツールチップ 属性。 Simptipは NPM、糸、そしてBowerパッケージ.
Hint.css - ツールチップを表示するための一般的なCSSライブラリの1つであるHint.cssは、Fiverr、Webflow、Tridivなどの一般的なWebサイトの多くで使用されています。他の2つのCSSライブラリとは異なり, Hint.cssが使用する アリアラベル あなたはクラス名を通してサイズと色を設定することができます BEM方法論を使用する。 Hint.cssは、NPM、Bower、およびCDNJSで入手できます。.
マイクロチップ - で構築されたツールチップを作成するためのもう一つの素晴らしいCSSライブラリ “アクセシビリティ” 念頭に置いて、マイクロチップ 用途 アリアラベル ツールチップの内容を保持する データ- ツールチップのサイズと位置を設定するための属性.
それはあなたがちょうど普通のCSSファイルでツールチップをカスタマイズすることを可能にするCSS変数を使用します。 CSS変数はすでに多くのWebブラウザやモバイルブラウザでサポートされています。マイクロチップは、NPM、ヤーンパッケージ、およびUNPkg CDNとして入手可能です。.
ウェンク - それはちょうど733バイトです。超軽量ライブラリー CSSNext、LESS、およびSCSSを使用して超現代的なCSSで書かれている そのため、スタイルを好きなようにカスタマイズして再コンパイルすることができます。 Wenkは、NPM、Yarn、および次の無料CDNサービスからダウンロードできます。rawgit.comおよびunpkg.com.
ツールチップ - もう一つ 軽量CSSライブラリ サイズはわずか1 KBです。 Tooltippyには、ツールチップをスタイリングするためのいくつかの既成のテーマが含まれています。それはStylusという名前のCSSプリプロセッサで書かれています。あなたができる方法についての指示を参照してください。 これらのテーマを拡張またはカスタマイズする.
ElegantTips - このライブラリにはいくつか付属しています 構築済みのテーマ 提供されているクラス名で変更できます。他のものとは異なり、HTML5に依存しているライブラリ データ- または アリアラベル ElegantTips属性には、ツールチップを形成するための追加要素が必要です。これにより、 単純なテキスト以外に、文字通りあらゆる内容をツールチップに追加する.
Tootik - このCSSライブラリがCSS、LESS、およびSasS形式のスタイルシートを提供するだけでなく、 ツールチップをカスタマイズするための使いやすいGUI. このツールによって生成されたHTMLを単にコピーして貼り付けることができます。それはとても簡単です.
バニラJS
TippyJS - Popper.jsを搭載したTippyJSには、 ツールチップを設定するための豊富なオプション. アニメーション、ツールチップの矢印、幅、サイズ、テーマなどをカスタマイズできます。それはまたあなたができるコールバック関数を提供します。 ツールチップが表示されて隠れているときに関数を実行する. これらの機能により、TippyJSは私たちのリストに載っている私たちの強力なJavaScriptライブラリの1つになり、ツールチップを作成できます.
Darsainツールチップ - このライブラリはツールチップの基本的な実装を提供します。それでも、tootipの動作を設定するための広範なオプションが用意されています。 ツールチップの外観を変更するためのクラス名のセット. ツールチップはIE 9のような古いブラウザで、そして必要ならIE 2のようにいくつかの調整をするだけでうまく動きます。.
バブ - Bubbは上級のJavaScriptユーザーには最適かもしれません。その使い方 単純なテキストを表示することを除いて、広範なAPI, より複雑なHTMLコンテンツをプログラム的にツールチップに追加することができます。すごいかっこいい;あなたは、ドキュメントの例を参照することができます.
ポッパー - 何かを作成するための技術的な抽象概念が含まれています “ポップス”, ツールチップ、ポップオーバー、ドロップダウンのように. TippyJSはこれをライブラリの基盤として使用しており、Bootstrap、Microsoft、AtlassianなどのWeb上で有名になっています。.
YYツールチップ - 他のライブラリとは異なり、YY Tooltip HTML要素や属性を追加する必要はありません. JavaScriptで完全に機能し、コンテンツ、位置、色はHTML要素ではなくObjectで定義されています。完全なJavaScript Webアプリケーションと組み合わせて使用するのに最適です。.
Position.js - ツールチップを作成するためのもう1つの優れたネイティブJavaScriptライブラリ、Position.js 機能を設定し、そこで生成されたコードをコピーして貼り付けるためのGUIを提供します。. Position.jsはReact.jsまたはVue.jsと組み合わせて使用できます。.
ベゼツールチップ - このライブラリは ツールチップを表示する14のオプション;のように 右, 左, 底, 左中央, 右端, 下中央, それに加えて、それはそれができるように十分に賢い 利用可能なスペースに基づいてツールチップの位置を調整する ツールチップを囲むデモをチェックする.
マウスチップ - このJavaScrtiptライブラリは、 カーソル位置に沿って移動するツールチップ. ツールチップが非標準で構成されています ネズミ捕り- HTML5を使用する代わりに属性 データ- 属性。マウスチップはNPMモジュールとして入手可能.
インターネットチップ - このライブラリによって生成されるツールチップ、MousetTipとまったく同じ カーソル位置に従います. すべてHTMLやJavaScriptの代わりにJavaScriptオブジェクトを通して設定されます。 最新のブラウザ用に属性も構築されています. 軽量で速いです.
MTip - Tooltip用のJavaScriptライブラリ 優れたブラウザ互換性. それはIE8と互換性があり、Optionsを通して完全にカスタマイズ可能です、そしてあなたはどんな要素にでもツールチップを追加することができます img （画像要素）.
バブルゼー - の単純な機能を提供する軽量のJavaScriptライブラリ “ツールチップ”. 出力をカスタマイズするための複雑なオプションなしでJavaScriptライブラリーを使用するのは簡単です。ツールチップの外観を変更したい場合は、Sassファイルが提供されています。デモをチェックする.
Tipfy - 最新のJavaScriptシンタックスES6で構築されています, Tipfyはたった2 KBのサイズです. ライブラリは2つのバージョンのファイルを提供します。 tipfy.min.js スクリプトを提供する 最新のES6構文, そして tipfy.es5.min.js 古いブラウザとの互換性が必要な場合それは使用しています データ- ツールチップをカスタマイズするための属性;の データチップサイド, たとえば、ツールチップの方向を設定するために使用されます。 データヒントテキスト ツールチップコンテンツを追加するための属性.
jQuery
ツールチップ - このライブラリは、以下のようなほとんど何でもカスタマイズするための広範なオプションを提供します テーマ、アニメーション、タッチサポート、コンテンツ、開閉トリガー, 開発者がカスタム関数でツールチップを拡張することを可能にするカスタムイベントリスナとコールバックも提供します。また、jQueryプラグインとして jQueryのバージョンによっては、tooltipはIE6のような古いブラウザでも動作するでしょう。 使用されています.
原型 - もう1つの広範なjQueryプラグイン、Protipは49ポジションをサポート, ツールチップコンテンツ、アイコンサポート、カスタムコールバック用のHTML, そしてもっとたくさん。 Protipは、ツールチップを簡単にカスタマイズできるGUIを提供します。.
パワーチップ - このjQueryプラグインは、ツールチップを実装するためのさまざまな方法を開発者に提供するオプションとAPIももたらします。それは支えます キーボードナビゲーション;で要素をナビゲートするときにポップアップを表示させる タブ キーボード。 PowereTipは NPMモジュールとして入手可能. RequireJSとBrowserifyで使用できます。.
アクセス可能なAria Tooltip - アクセシビリティ機能が組み込まれたjQueryプラグイン、ツールチップは タイトル、複数行のテキスト、および閉じるボタンを含むダイアログボックスを表示するように設計されています. それは私達のリストのそれ自身の一つです.
TipsJS - シンプルなjQueryプラグインですが、それでも非常に独特の機能をもたらします。の ツールチップの内容は データツールチップ 属性. さらに、Markdownフォーマットと同様に、コンテンツを特殊文字でラップしてフォーマットすることもできます。使用できます * コンテンツを太字にする, 〜 イタリック体 ^ 見出し用.
ダークツールチップ - このライブラリは、ツールチップを起動するための本当に便利な機能を提供します。たとえば、 確認ボタン - [はい]および[いいえ]、ツールチップが表示されている間は背景を暗くし、HTML要素を追加します。 内容に。私はあなたが本当にデモページをチェックアウトするべきだと思います.
アリアツールチップ - 組み込みのアクセシビリティ機能を備えた別のツールチップ、このjQueryプラグインはWAI-ARIA 1.1に準拠しています。それはあなたができるような方法で敏感です 異なるビューポートサイズに対して異なる構成を提供する. Aria Tooltipは、NPMモジュールという名前で入手可能です。 t-aria-tooltip.
Toolbar.js - 他のjQueryプラグインはツールチップ内に単純なテキストまたはHTMLコンテンツしか表示しないかもしれませんが、 jQueryプラグインはツールバーを作成します. ツールチップにはアイコン付きの2つ以上のリンクがあり、通常は次のアクションを実行します。 クリック, 他のツールバーと同じです。ドキュメントと例をチェックしてください.
VueJS
Vツールチップ - V-Tooltipは、Popper.jsをベースにしたVue.jsコンポーネントです。それは提供します という名前の新しいディレクティブ Vツールチップ これは、ツールチップを作成するために任意の要素に追加できます。. の Vツールチップ ツールチップの内容またはオプションを含めることができます。習慣は別として Vツールチップ ディレクティブ、ツールチップを追加することもできます。 Vポップオーバー 成分。このコンポーネントでは、 より複雑なコンテンツをツールチップに追加する Vue.jsコンポーネントまたはHTMLを使って.
Vue-Bulmaツールチップ - Bulma UI Frameworkに基づいてツールチップを作成するためのVue.jsコンポーネント。このライブラリはVue Bulmaの構成要素です。しかし tooltipコンポーネントは、NPMモジュールという名前で入手可能です。 vue-bulma-tooltip これをスタンドアロンコンポーネントとして使用できること.
Vue-Directive-Tooltip - 全体的に、Popper.jsをベースにしたV-Tooltipコンポーネントに似ていて、同じディレクティブを提供します。 Vツールチップ. しかし、それは提供していないようです Vポップオーバー 成分.
ヴューティッピー - このライブラリはTippy.jsをVue.jsコンポーネントにまとめています。それはと呼ばれるカスタムVue.jsディレクティブを備えています v-tippy これはHTML属性のように機能します。ツールチップのコンテンツやそれをカスタマイズするオプションを追加できます。それはまたレンダリングします ツールチップコンテンツのカスタムVue.jsコンポーネントを使用して html オプション.
VueJS - ポップオーバー - というカスタムディレクティブを持つカスタムVue.js Vポップオーバー そして2つのカスタムコンポーネント
ヴューヒント - Hint.cssをラップするVue.jsプラグイン。プラグインの機能 vヒントcss ツールチップを追加するディレクティブ。それ Hint.cssと同じオプションセットをもたらします。, そのため、それらをJavaScriptオブジェクトまたはVue.js修飾子として追加できます。.
ReactJS
リアクトジョイライド - 一連のツールチップを表示するためのReactコンポーネント 新しいユーザーに新しいアプリケーションに慣れるように指導する.
リアクトフローター - このライブラリはPopper.jsをFloaterという名前のReactコンポーネントにラップしているので、Floaterと同じ優れた機能を備えています。ツールチップとポップアップを追加できます。また、 このコンポーネントで遊ぼう このサンドボックスを通して.
React Autotip - 自動配置機能を備えたシンプルなReactコンポーネントであるeact Autotipは、 ツールチップの位置を自動的に調整する 周囲の空きスペースが変わったとき.
反応ティッピー - Tippy.jsとPopover.jsの上に構築されています。このライブラリは ツールチップ そのコンポーネント Reactアプリケーションに含めることができます.
反応のヒント - Hint.cssを拡張したReactコンポーネント。コンポーネントは、Hint.cssでは利用できない以下のようないくつかの機能を追加します。 自動位置調整、遅延、およびコールバック機能.
もっと
琥珀色のツールチップ - ツールチップを作成するためのEmber.jsコンポーネント。Popper.jsの上に構築されています。コンポーネントもアクセシビリティを念頭に置いて設計されており、この問題に関する約508の遵守に準拠するように改善を続けています。.
D3のヒント - D3.jsプラグインD3.jsはチャート、マップ、ダイアグラムなどのようなデータ視覚化のためのJavaScriptライブラリです。このプラグインはあなたがこれらのデータの上にツールチップを表示することを可能にします.
