ツールチップは、リンクを説明したい場合に非常に便利です。 Tooltipプラグインは、Jason Frameが書いたjquery.tipsyに触発されています。ツールチッププラグインは、画像に依存せず、代わりにCSSを使用してアニメーション効果を達成し、データ属性を使用してタイトル情報を保存するなど、多くの改善をもたらしました。
プラグインの機能を個別に参照する場合は、tooltip.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
ツールチッププラグインは、要件に基づいてコンテンツとタグを生成します。デフォルトでは、ツールチップはトリガー要素の背後に配置されます。ツールチップを追加する方法は2つあります。
1。データ属性を介して：ツールチップを追加する必要がある場合は、アンカータグにdata-toggle = "Tooltip"を追加するだけです。アンカーのタイトルは、ツールチップのテキストです。デフォルトでは、プラグインはツールチップを上部に設定します。
<a href = "＃" data-toggle = "tooltip">私の上にホバリングしてください</a>
2。JavaScriptを介して：JavaScriptを介してトリガーツールチップ（ツールチップ）：
$（ '＃識別子'）。ツールチップ（オプション）
ツールチッププラグインは、前述のドロップダウンメニューやその他のプラグインのようなものではなく、純粋なCSSプラグインではありません。プラグインを使用するには、jQuery（javascriptを読む）を使用してアクティブ化する必要があります。次のスクリプトを使用して、ページ内のすべてのツールチップを有効にします。
$（function（）{$（ "[data-toggle = 'tooltip']"）。tooltip（）;}）;2。オプション
Bootstrap Data API（Bootstrap Data API）を介して追加されるか、JavaScriptを介して呼び出されるオプションがいくつかあります。次の表には、これらのオプションがリストされています。
三つ。ツールチップ
//基本的な例<a href = "＃" data-toggle = "tooltip"> html5 </a> // jsパーツは$（ '＃section'）。
ツールチップには、次のようにプロンプトの表示を構成するための多くのプロパティがあります。
<a href = "＃" rel = "tooltip" data-toggle = "tooltip" data-animation = "false" data-html = "true" data-clacement = "a [rel = tooltip]" data-trigger = "data-delay =" 500 "data-template =" <b> 123 </b> "
JavaScriptの以前のデータを削除するだけです。を含む：アニメーション、HTML、配置、セレクター、オリジナルタイトル、タイトル、トリガー、遅延、コンテナ、テンプレート、その他のプロパティを含みます。
// javaScriptメソッド$（ '＃セクションA'）。ツールチップ（{delay：show：500、hide：100、}、container： 'body'}）;JavaScriptには4つの方法があります：表示、非表示、切り替え、破壊。
// show $（ '＃section a'）。ツールチップ（ 'show'）; // hide $（ '＃section a'）。ツールチップ（ 'hide'）; // $ show and hide $（ '＃section a'）。
ツールチップには4種類のイベントがあります。
//イベント、その他の類似点
$（ '＃select a'）
この一連のチュートリアルは、Bootstrap Basic Tutorials Special Topics、Click to Learnのようにコンパイルされています。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。