JSツールチップ(tooltip.js)
ツールチッププラグインは、ユーザーが要素の上にマウスポインタを移動したときに表示される小さなポップアップボックスです。
ツールチップのチュートリアルについては、当社の読みBootstrap Tooltipのチュートリアルを 。
ヴィアdata-*属性
data-toggle="tooltip"ツールチップを活性化させます。
title属性は、ツールチップ内に表示するテキストを指定します。
JavaScriptを介して、
ツールチップは、CSS-プラグインだけではありませんので、jQueryを使って初期化しなければなりません：指定された要素を選択して呼び出すtooltip()メソッドを。
例
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
»それを自分で試してみてください ツールチップのオプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合は、にオプション名を追加data-のように、 data-placement=""
| 名 | タイプ | デフォルト | 説明 | それを試してみてください |
|---|---|---|---|---|
| animation | boolean | true | ツールチップを表示と非表示時にCSSのフェードトランジション効果を追加するかどうかを指定
| それを試してみてください |
| コンテナ | 文字列、またはブール値はfalse | 偽 | 特定の要素にツールチップを追加します。 例：コンテナ： 'body' | それを試してみてください |
| delay | number, or object | 0 | それはツールチップを表示し、非表示になりますミリ秒数を指定します。 表示の遅延や隠蔽のために別のものを指定するには、オブジェクト構造を使用します。 delay: {show: 500, hide: 100} -表示するために500ミリ秒かかりますtooltip 、だけ100ミリがそれを非表示にします | それを試してみてください |
| html | boolean | false | ツールチップにHTMLタグを受け入れるかどうかを指定します。
false（デフォルト）に設定すると、 jQuery's text()メソッドが使用されます。 あなたはXSS攻撃を心配している場合は、これを使用します | それを試してみてください |
| placement | string | "top" | ツールチップの位置を指定します。 可能な値：
| それを試してみてください |
| selector | string, or the boolean false | false | 指定されたセレクタにツールチップを追加します。 | それを試してみてください |
| template | string | ツールヒントを作成するときにベースHTMLに使用します。 ツールチップのタイトルは、クラス有する素子に挿入されます.tooltip-innerクラスとし、要素.tooltip-arrowツールチップの矢印になります。 最も外側のラッパー要素は持っている必要があり.tooltipクラスを。 | ||
| title | string | "" | ツールチップ内に表示するテキストを指定します。 | それを試してみてください |
| trigger | string | "hover focus" | ツールチップがトリガされる方法を指定します。 可能な値：
| それを試してみてください |
| viewport | string, or object | {selector: "body", padding: 0} | この要素の境界内にツールチップを保持します。 例： viewport: '#viewport'または{selector: '#viewport', padding: 0} |
ツールチップのメソッド
次の表は、使用可能なすべてのツールチップのメソッドを示します。
| 方法 | 説明 | それを試してみてください |
|---|---|---|
| .tooltip( options ) | オプションでツールチップを有効にします。 有効な値については、上記のオプションを参照してください。 | それを試してみてください |
| .tooltip("show") | ツールチップを表示 | それを試してみてください |
| .tooltip("hide") | ツールチップを非表示にします | それを試してみてください |
| .tooltip("toggle") | ツールチップを切り替えます | それを試してみてください |
| .tooltip("destroy") | 隠し、ツールチップを破壊します | それを試してみてください |
ツールチップイベント
次の表は、使用可能なすべてのツールチップのイベントを示します。
| イベント | 説明 | それを試してみてください |
|---|---|---|
| show.bs.tooltip | ツールチップが表示されようとしているときに発生します | それを試してみてください |
| shown.bs.tooltip | ツールチップが完全に表示されたときに発生します（CSSの遷移が完了した後） | それを試してみてください |
| hide.bs.tooltip | ツールヒントが非表示にされる前に発生します | それを試してみてください |
| hidden.bs.tooltip | ツールチップが完全に隠されている場合に発生します（CSSの遷移が完了した後） | それを試してみてください |
例
カスタムツールチップデザイン
ツールチップの外観をカスタマイズするためにCSSを使用します。
例
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} »それを自分で試してみてください