今日は、多くの便利な機能を備えたWebページ用のHTML CSSJavascriptで機能的なツールチップを作成するのに役立つライブラリを学習します。
#ツールチップとは何ですか？
ツールチップは、ユーザーがWebページ内のオブジェクトにカーソルを合わせたときに詳細に注釈を付けるのに役立つ要素です。 私の意見では、それはサイトの新しいユーザーがその追加情報を通して機能を明確に理解するのを助けるでしょう。 通常はタグのtitle属性のように見えますが、ツールチップライブラリを使用すると、美しいツールチップを簡単に設計して、サイトに機能を追加できます。
#Tippy.js
Tippy.jsは、ツールチップを簡単に作成できる強力なライブラリです。 ツールチップテーマの設定、ツールチップのネスト、表示位置の変更など、ツールチップ機能をHTMLオブジェクトに拡張する柔軟性があります。 また、非常に簡単で、npm、yardを介してインストールすることも、CDNを使用して直接使用することもできます。 HTMLページ（reactサポートライブラリも利用可能）。 また、Webサイトに適用可能な場合にプログラム機能を追加または削除する方法の詳細な手順と、特定のケースごとの例についても説明します。 私のお気に入りの属性の1つは、ユーザーがHTMLオブジェクトにカーソルを合わせたときに、AJAXを介してコンテンツ（画像、テキストなど）をロードする機能です。
Tippy.js
#POPPER
POPPERは、ツールチップに必要な機能を維持しながらWebサイトの速度を向上させるのに役立つ、わずか約3kBのサイズのJavaScriptで記述されたものです。 Bootstrap、Foundation、Material UIなどの一般的なライブラリでよく使用されます...私の意見では、要素の位置を決定して表示するというツールチップの一般的な問題を解決するのに役立ちます。できる限り表示してください。さまざまなデバイス画面で。
POPPER
#Hint.css
Hint.cssはCSSが埋め込まれたオープンソースであり、サイズが約1.5kbのさまざまなタイプのWebプロジェクトにのみ適用できます。 セットアップも非常に簡単です。 あなたがしなければならないのは、必要な機能を備えたクラスをダウンロードして呼び出すことだけです（デモで例を見ることができます）。 Hint.cssは、最新のすべてのブラウザーで実行され、今日のデバイス画面に応答します。
Hint.css
#Microtip
MicrotipはCSSベースのツールチップジェネレーターでもあり、わずか約1kbです。 ツールチップの表示位置をカスタマイズして、さまざまなタイプのプロジェクトに適用できる機能を備えた純粋でコンパクトなツールチップを作成する必要がある場合は、このオプションを選択する必要があります。
Microtip
#Tootik
Tootikを使用すると、ツールチップを簡単に作成できます。 npm、CDN、bower、ダウンロードなど、さまざまな方法でセットアップして使用できます。 HTMLタグでdata-tootik = ""属性を呼び出すだけで、ツールチップをすばやく生成できます。 さらに、data-tootik-conf = ""属性を使用して、他の機能を構成できます。 そのデモページで、必要な属性を追加でき、対応するコードが自動的に印刷されます。
Tootik
#Intro.js
Intro.jsはJavaScriptであり、ユーザーが初めてWebサイトにアクセスしたときに覚えておくべき機能や事柄についてのチュートリアルを作成できます。 オープンソースであるため、さまざまなWebプロジェクトすべてに使用できます。 また、非常に軽量で、Javascriptファイルの場合は約10 kb、CSSファイルの場合は2.5kbです。 さらに、Google Chrome、Firefox、Operaなどの現在の多くのWebブラウザとも互換性があります...
Intro.js
#Toolbar.js
Turbole.Jsは、ツールバーを簡単に表示するためのツールチップを作成できるjqueryです。 Webサイトのデザインに適した色の選択、ツールバーに表示される位置の調整、ツールチップを使用したモーションエフェクトの追加など、多くの便利な機能が含まれています。
Toolbar.js
#Wenk
Wenkは、CSS、LESS、SCSSなどに使用できるコンパクトなツールチップディスプレイです。 圧縮時のファイルサイズは非常に小さく、約733バイトです。 HTMLタグのdata属性を使用するか、オブジェクトを使用して、機能を簡単に設定または追加できます。
Wenk
#Balloon.css
Balloon.cssは、表示位置、サイズ、色、フォントサイズ、アイコンなど、必要なすべてのツールチップ機能を含むCSSです。 適切なツールチップを選択して、プログラムに貼り付けるだけです。 これは、HTMLの「data」タグと「class」オブジェクトを介して呼び出されます。 ただし、 や >などの自動終了タグには使用できないという制限があります。
Balloon.css
#Tooltip
ツールチップは、左上、右上、左下、右下など、オブジェクトの任意の場所にツールチップを表示するのに役立つツールです。 セットアップ中にファイルをダウンロードして、目的の場所に電話するだけです。 Javascriptを使用するツールチップは、そのオブジェクトのツールチップをどのように表示するかを決定できました。 ただし、制限は、4つのファイルをコンピューターにダウンロードする必要があることです。そのうちの3つは、使用するjsファイルと1つのcssファイルです。
Tooltip
#Tipso
Tipsoは、Jqueryで構築されたツールで、多くの便利で美しい機能を備えたツールチップを作成するのに役立ちます。 要件は、バージョン1.7でJqueryを使用することです。 ツールチップの設定中に、AJAXを介してテキストの色、背景色、ヘッダーコンテンツ、表示コンテンツなどのプロパティを呼び出すことで、機能を簡単に追加できます。 私が気に入っているのは、Animate.cssと組み合わせて、多くの美しいモーションエフェクトを作成できることです。
Tipso
#Tooltip jBox
Tooltip jBox
#Protip
Protip
#PowerTip
PowerTip
#Simptip
Simptip
#D3-tip
D3-tip
般性:
この記事があなたを助けるためのツールチップを提供することを願っています。 開発、ウェブデザイン、質問については、メールでお問い合わせください。 お早めにご連絡いたします。 より良い記事を書くことができるように、ページをサポートし続けてください。