Bootstrap Tooltips

BY admin
|
Advertisements

このチュートリアルでは、Bootstrapでツールチップを作成する方法について学習します。

Creating the Tooltips with Bootstrap

ツールチップは、ユーザーがリンクやボタンなどの要素の上にマウスポインタを置くと表示される小さなポップアップで、マウスポインタが置かれている要素に関するヒントや情報を提供します。

ツールチップは、マウス ポインターをアイコンやリンクの上に置いたときに、その目的を知ることができるので、Web サイトの新規訪問者にとって非常に便利です。

ステップ 1: ツールチップ マークアップの追加

ツールチップを作成するには、要素に data-toggle="tooltip" 属性を追加する必要があります。 ホバー時に表示されるトールチップ テキストは、title 属性を使用して指定できます。

ここに、ハイパーリンクにトールチップを追加するための標準マークアップがあります。

<a href=”#” data-toggle=”tooltip” title=”Some text”>Hover over me</a>

同様に、ボタン、アイコンなどの他の要素にツールチップを追加することができます。

注意: パフォーマンス上の理由から、ツールチップのデータ エイピスはオプトイン方式になっており、ツールチップを使用するには、tooltip()メソッドで自分で初期化しなければなりません。

Step 2: ツールチップのトリガー

ツールチップは JavaScript でトリガーできます。JavaScript コードでターゲット要素の id, class または任意の CSS セレクタを使用して tooltip() Bootstrap メソッドを呼び出すだけでOKです。 次の jQuery コードは、ページ上のすべてのツールチップを data-toggle 属性で選択し、初期化するものです。

例

このコードを試す ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– 上記の例の出力は、次のようになります。

ツールチップの方向を設定する

ツールチップを要素の上、右、下、左側に表示するよう設定することができます。

データ属性によるツールチップの位置設定

次の例では、データ属性によるツールチップの方向を設定する方法を説明します。

Positioning of Tooltips via JavaScript

次の例では、JavaScript を使用してツールチップの方向を設定する方法を示します。

Options

Tooltip プラグインの機能をカスタマイズするために tooltip() Bootstrap メソッドに渡すことができる特定のオプションがあります。

Name Type Default Value Description
animation boolean true CSS fade transition を tooltip に適用する。
html boolean false ツールチップにhtmlを挿入する。 false の場合、jQuery の text() メソッドが DOM にコンテンツを挿入するために使用されます。 XSS 攻撃が心配な場合は、テキストを使用します。
placement string | function ‘top’ ツールチップの位置 – top | bottom | left | right | auto を設定します。 auto” 値が指定された場合、ツールチップの向きを動的に変更します。
selector string false セレクタが与えられた場合、ツールチップ オブジェクトは指定したターゲットにアタッチされます。
title string | function ” タイトル属性が存在しない場合、デフォルトtitle値を設定します。
trigger string ‘hover focus’ クリック｜ホバー｜フォーカス｜手動など、ツールチップをトリガーする方法を指定します。
delay number | object 0

ツールチップを表示または隠す際の遅延時間 (ms) – manual trigger typeには適用されない。

数値が指定された場合、遅延は表示/非表示の両方に適用されます Object 構造は。
delay: { show: 500, hide: 100 }
container string | false false tooltip を特定の要素に適用する。 container: 'body'
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ツールチップ作成時に使用するベース HTML です。 ツールチップのタイトルはクラス .tooltip-inner を持つ要素に挿入され、クラス .tooltip-arrow を持つ要素はツールチップの矢印になります。

一番外側のラッパー要素は .tooltip クラスを持つ必要があります。
viewport string | object { selector: 'body', padding: 0 } この要素の境界内にツールチップを維持します。 例 viewport: '#viewport' または { selector: '#viewport', padding: 0 }
offset number | string 0 ツールチップのターゲットに対するオフセットを指定します。
fallbackPlacement string | array ‘flip’ フォールバック時に Popper がどの位置を使用するかを指定します。
boundary string | element ‘scrollParent’ Overflow constraint boundary of the tooltipを指定します。 'viewport', 'window', 'scrollParent', または HTMLElement reference (JavaScript only).
sanitize boolean true サニタイズを有効または無効にする。 有効にすると、’template’ と ‘title’ オプションがサニタイズされます。
whiteList object value 許可された属性とタグが含まれるオブジェクト。
sanitizeFn null | function null 独自のサニタイズ機能を指定できるようにします。 データ属性を使用してツールチップのオプションを設定するには、正しい値とともにオプション名を data- に追加するだけです (例 data-animation="false", data-placement="bottom" など)。 JavaScriptを使用してツールチップのオプションを設定する方法を知るために、下のセクションのツールチップのメソッド$().tooltip(options)を参照してください。

メソッド

これらはBootstrapの標準ツールチップのメソッドです：

$().tooltip(options)

このメソッドは要素のグループにツールチップ-ハンドラをアタッチします。 また、ツールチップのオプションを設定することができるので、必要に応じてカスタマイズすることができます。

次の例では、選択した要素に title 属性の値が省略されているか、欠けている場合に、指定したテキストをツールチップの内部に挿入します:

次の例では、ツールチップの内部に HTML コンテンツを配置する方法を示します:

次の例では、ツールチップの delay オプションで、表示/非表示のタイミングを JavaScript で制御する方法です:2883>

ツールチップのオプションは、次のとおりです:

ツールチップのオプションは、選択した要素に省略されているか、欠けている場合に、指定したテキストをツールチップの内部に挿入します:

HTML コンテンツは、次のようになります。

次の例では、デフォルトのテンプレートを使用する代わりに、Bootstrap ツールチップ用に独自のテンプレートを作成する方法を示します。

次の例では、ツールチップの動的に生成される HTML コードを <body>要素の代わりに .wrapper 要素の末尾に挿入します。

注意: tooltip のデフォルトの container オプション値を上書きしても、ページ上で目に見える違いは発生しません。 実際の結果を見るには、Firebug または Developer ツールを使用して結果の DOM を検査する必要があります。

同様に、$().tooltip(options) メソッドを使用してツールチップの他のオプションを設定することができます。 Bootstrap tooltip pluginの他のメソッドを確認してみましょう。

.tooltip(‘show’)

このメソッドは要素のツールチップを表示します。

Example

このコードを試す ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‘hide’)

このメソッドは要素のツールチップを非表示にします。tooltip(‘toggle’)

このメソッドは、要素のツールチップをトグルします。

.tooltip(‘enable’)

このメソッドは、要素のツールチップを非表示にし、破棄するものです。

例

このコードを試す ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‘disable’)

このメソッドは、要素のツールチップを表示する機能を無効にする。

.tooltip(‘toggleEnabled’)

このメソッドは、要素のツールチップを表示するか隠すかをトグルするものです。tooltip(‘update’)

このメソッドは、要素のツールチップの位置を更新します。

Example

このコードを試す ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Events

Bootstrap tooltipクラスにはツールチップ機能へのフックのためにいくつかのイベントを含んでいます。

Event Description
show.bs.tooltip このイベントは show インスタンスメソッドが呼ばれるとすぐに発生します。
shown.bs.tooltip このイベントは、ツールチップがユーザーに見えるようになったときに発生します。
hide.bs.tooltip このイベントは、hideインスタンスメソッドが呼ばれた時、直ちに発生します。
inserted.bs.tooltip このイベントは、ツールチップテンプレートが DOM に追加されたとき、show.bs.tooltip イベントの後で発生します。

次の例では、ツールチップのフェードアウト遷移が完全に完了したときに、ユーザーに警告メッセージを表示します.

Advertisements