ツールチップ
CSSとJavaScriptを使用してカスタムBootstrapツールチップを追加するためのドキュメントと例。アニメーションにはCSS3、ローカルタイトルの保存にはdata属性を使用します。
概要
ツールチッププラグインを使用する際の注意点
- ツールチップは、配置のためにサードパーティライブラリPopperに依存しています。ツールチップを機能させるには、bootstrap.jsの前にpopper.min.jsを含めるか、Popperを含む
bootstrap.bundle.min.js/bootstrap.bundle.jsを使用する必要があります！ - ソースからJavaScriptをビルドしている場合、
util.jsが必要です。 - パフォーマンス上の理由から、ツールチップはオプトインです。そのため、**自分で初期化する必要があります**。
- 長さ0のタイトルを持つツールチップは表示されません。
- より複雑なコンポーネント（入力グループ、ボタングループなど）でのレンダリングの問題を回避するには、
container: 'body'を指定します。 - 非表示の要素でツールチップをトリガーしても機能しません。
.disabledまたはdisabled要素のツールチップは、ラッパー要素でトリガーする必要があります。- 複数行にまたがるハイパーリンクからトリガーされた場合、ツールチップは中央に配置されます。この動作を回避するには、
<a>にwhite-space: nowrap;を使用します。 - 対応する要素がDOMから削除される前に、ツールチップを非表示にする必要があります。
- ツールチップは、シャドウDOM内の要素によってトリガーできます。
prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの低モーションセクションを参照してください。すべて理解できましたか？素晴らしいですね。それでは、いくつかの例で動作を確認しましょう。
例：ページ全体でツールチップを有効にする
ページ上のすべてのツールチップを初期化する1つの方法は、data-toggle属性で選択することです。
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
例
下のリンクにカーソルを合わせると、ツールチップが表示されます。
ツールチップ付きのインラインリンクをいくつか示すためのプレースホルダーテキストです。これは単なるフィラーであり、キラーではありません。実際のテキストの存在を模倣するためにここに配置されたコンテンツです。そして、それらはすべて、実際の状況で使用した場合のツールチップの見え方を理解してもらうためです。そのため、リンク上のこれらのツールチップが、あなた自身のサイトまたはプロジェクトで使用したときにどのように機能するかを理解できたことを願っています。
下のボタンにカーソルを合わせると、上、右、下、左の4つのツールチップの方向が表示されます。
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
カスタムHTMLを追加して
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
使用方法
ツールチッププラグインは、コンテンツとマークアップをオンデマンドで生成し、デフォルトではトリガー要素の後にツールチップを配置します。
JavaScriptを介してツールチップをトリガーする
$('#example').tooltip(options)
オーバーフローautoとscroll
親コンテナがoverflow: autoまたはoverflow: scroll（.table-responsiveなど）を持っている場合、ツールチップの位置は自動的に変更しようとしますが、元の配置の位置は保持されます。解決するには、boundaryオプションをデフォルト値の'scrollParent'以外の値（'window'など）に設定します。
$('#example').tooltip({ boundary: 'window' })
マークアップ
ツールチップに必要なマークアップは、ツールチップを表示するHTML要素のdata属性とtitleだけです。ツールチップの生成されたマークアップは非常にシンプルですが、位置（デフォルトではプラグインによってtopに設定されています）が必要です。
キーボードと支援技術ユーザーのためのツールチップの機能
ツールチップを追加するべきなのは、伝統的にキーボードでフォーカス可能でインタラクティブなHTML要素（リンクやフォームコントロールなど）だけです。<span>などの任意のHTML要素は、tabindex="0"属性を追加することでフォーカス可能にできますが、これはキーボードユーザーにとって、インタラクティブでない要素に不要で混乱を招くタブストップを追加することになります。また、ほとんどの支援技術は現在、この状況ではツールチップを発表しません。さらに、ツールチップのトリガーとしてhoverのみに依存しないでください。これは、キーボードユーザーにとってツールチップをトリガー不可能にするからです。
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
無効な要素
disabled属性を持つ要素はインタラクティブではないため、ユーザーはツールチップ（またはポップオーバー）をトリガーするためにフォーカス、ホバー、またはクリックできません。回避策として、<div>または<span>ラッパーからツールチップをトリガーする必要があります。理想的には、tabindex="0"を使用してキーボードでフォーカス可能にし、無効な要素のpointer-eventsをオーバーライドします。
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>オプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、オプション名にdata-を付加します（例：data-animation=""）。
sanitize、sanitizeFn、whiteListオプションはデータ属性を使用して提供できません。| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| animation | boolean | true | ツールチップにCSSフェードトランジションを適用します。 |
| container | string | element | false | false |
ツールチップを特定の要素に追加します。例： |
| delay | number | object | 0 |
ツールチップの表示と非表示の遅延（ms）- 手動トリガータイプには適用されません 数値を指定すると、遅延は非表示/表示の両方に適用されます。 オブジェクト構造は次のとおりです： |
| html | boolean | false |
ツールチップでHTMLを許可します。 trueの場合、ツールチップの XSS攻撃を心配する場合は、テキストを使用してください。 |
| placement | string | function | 'top' |
ツールチップの配置方法 - auto | top | bottom | left | right。 配置を決定するために関数を使用する場合、ツールチップDOMノードを最初の引数として、トリガー要素DOMノードを2番目の引数として呼び出されます。 |
| selector | string | false | false | セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。実際には、これは動的に追加されたDOM要素（jQuery.onサポート）にもツールチップを適用するために使用されます。これと参考になる例を参照してください。 |
| template | string | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ツールチップの作成時に使用する基本HTML。 ツールチップの
最外側のラッパー要素には、 |
| title | string | element | function | '' |
関数が指定されている場合、ツールチップが添付されている要素に |
| trigger | string | 'hover focus' |
ツールチップのトリガー方法 - click | hover | focus | manual。複数のトリガーを渡すことができます。スペースで区切ります。
|
| offset | number | string | function | 0 |
ターゲットに対するツールチップのオフセット。 オフセットを決定するために関数を使用する場合、オフセットデータを含むオブジェクトを最初の引数として呼び出されます。関数は同じ構造のオブジェクトを返す必要があります。トリガー要素DOMノードが2番目の引数として渡されます。 詳細については、Popperのoffsetドキュメントを参照してください。 |
| fallbackPlacement | string | array | 'flip' | Popperがフォールバックで使用する位置を指定できます。詳細については、Popperのbehaviorドキュメントを参照してください。 |
| customClass | string | function | '' |
表示時にツールチップにクラスを追加します。これらのクラスは、テンプレートで指定されたクラスに追加して追加されます。複数のクラスを追加するには、スペースで区切ります： 追加のクラス名を記述した単一の文字列を返す関数も渡すことができます。 |
| 境界 | 文字列 | 要素 | 'scrollParent' | ツールチップのオーバーフロー制約境界。'viewport'、'window'、'scrollParent'の値、またはHTMLElement参照（JavaScriptのみ）を受け入れます。詳細については、PopperのpreventOverflowドキュメントを参照してください。 |
| サニタイズ | boolean | true | サニタイズの有効化または無効化。有効にすると、'template'および'title'オプションがサニタイズされます。JavaScriptドキュメントのサニタイザーセクションを参照してください。 |
| ホワイトリスト | オブジェクト | デフォルト値 | 許可される属性とタグを含むオブジェクト |
| sanitizeFn | null | 関数 | null | ここで独自のサニタイズ関数を指定できます。これは、専用のライブラリを使用してサニタイズを実行する場合に便利です。 |
| popperConfig | null | オブジェクト | null | BootstrapのデフォルトのPopper設定を変更するには、Popperの設定を参照してください。 |
個々のツールチップのデータ属性
個々のツールチップのオプションは、上記で説明したように、データ属性を使用して指定することもできます。
メソッド
非同期メソッドとトランジション
すべてのAPIメソッドは非同期であり、トランジションを開始します。トランジションが開始されるとすぐに呼び出し元に返りますが、終了する前です。さらに、トランジション中のコンポーネントへのメソッド呼び出しは無視されます。
$().tooltip(options)
要素コレクションにツールチップハンドラーをアタッチします。
.tooltip('show')
要素のツールチップを表示します。ツールチップが実際に表示される前（つまり、shown.bs.tooltipイベントが発生する前）に呼び出し元に返ります。これは、ツールチップの「手動」トリガーと見なされます。長さゼロのタイトルを持つツールチップは表示されません。
$('#element').tooltip('show')
.tooltip('hide')
要素のツールチップを非表示にします。ツールチップが実際に非表示になる前（つまり、hidden.bs.tooltipイベントが発生する前）に呼び出し元に返ります。これは、ツールチップの「手動」トリガーと見なされます。
$('#element').tooltip('hide')
.tooltip('toggle')
要素のツールチップを切り替えます。ツールチップが実際に表示または非表示になる前（つまり、shown.bs.tooltipまたはhidden.bs.tooltipイベントが発生する前）に呼び出し元に返ります。これは、ツールチップの「手動」トリガーと見なされます。
$('#element').tooltip('toggle')
.tooltip('dispose')
要素のツールチップを非表示にし、破棄します。デリゲーションを使用するツールチップ（selectorオプションを使用して作成されたツールチップ）は、子孫のトリガー要素で個別に破棄できません。
$('#element').tooltip('dispose')
.tooltip('enable')
要素のツールチップを表示できるようにします。ツールチップはデフォルトで有効になっています。
$('#element').tooltip('enable')
.tooltip('disable')
要素のツールチップを表示できなくします。ツールチップは、再度有効にしない限り表示できません。
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
要素のツールチップの表示または非表示を切り替えます。
$('#element').tooltip('toggleEnabled')
.tooltip('update')
要素のツールチップの位置を更新します。
$('#element').tooltip('update')
イベント
| イベントタイプ | 説明 |
|---|---|
| show.bs.tooltip | このイベントは、showインスタンスメソッドが呼び出された直後に発生します。 |
| shown.bs.tooltip | このイベントは、ツールチップがユーザーに見えるようになったときに発生します（CSSトランジションが完了するまで待ちます）。 |
| hide.bs.tooltip | このイベントは、hideインスタンスメソッドが呼び出された直後に発生します。 |
| hidden.bs.tooltip | このイベントは、ツールチップがユーザーから非表示になった後に発生します（CSSトランジションが完了するまで待ちます）。 |
| inserted.bs.tooltip | このイベントは、show.bs.tooltipイベントの後、ツールチップテンプレートがDOMに追加されたときに発生します。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})