Source

ツールチップ

アニメーション用の CSS3 とローカル タイトル ストレージ用のデータ属性を使用して、CSS と JavaScript でカスタム Bootstrap ツールチップを追加するためのドキュメントと例。

概要

ツールチップ プラグインを使用する際の注意事項:

  • ツールチップは、配置のためにサードパーティ ライブラリのPopper.jsに依存しています。ツールチップを機能させるには、bootstrap.js の前にpopper.min.jsを含めるか、Popper.js を含むbootstrap.bundle.min.js/を使用する必要があります。bootstrap.bundle.js
  • JavaScript をソースからビルドする場合はutil.js、 .
  • ツールチップはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
  • タイトルの長さがゼロのツールチップは表示されません。
  • container: 'body'より複雑なコンポーネント (入力グループ、ボタン グループなど) でのレンダリングの問題を回避するために指定します。
  • 非表示の要素に対するツールチップのトリガーは機能しません。
  • .disabledまたは要素のツールチップはdisabled、ラッパー要素でトリガーする必要があります。
  • 複数行にわたるハイパーリンクからトリガーされると、ツールチップが中央に配置されます。この動作を回避するには、 でを使用white-space: nowrap;します。<a>
  • ツールチップは、対応する要素が DOM から削除される前に非表示にする必要があります。
  • Shadow DOM 内の要素のおかげで、ツールチップをトリガーできます。

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディア クエリに依存します。アクセシビリティ ドキュメントの縮小モーション セクションを参照してください。

それをすべて手に入れましたか？すばらしい、いくつかの例でそれらがどのように機能するか見てみましょう。

例: どこでもツールチップを有効にする

data-toggleページ上のすべてのツールチップを初期化する 1 つの方法は、属性でツールチップを選択することです。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

例

以下のリンクにカーソルを合わせると、ツールヒントが表示されます。

タイト パンツ ネクスト レベルのケフィーヤ、おそらく聞いたことがないでしょう。フォトブースヒゲ生デニム活版ヴィーガンメッセンジャーバッグスタンプタウン。農場から食卓までのセイタン、mcsweeney's fixie の持続可能なキノア 8 ビット アメリカン アパレルには、テリー リチャードソンのビニール シャンブレーがあります。ビアード スタンプタウン、カーディガン banh mi lomo サンダーキャッツ。豆腐のバイオディーゼル ウィリアムズバーグ マーファ、フォーロコ マックウィーニーのクレンズ ビーガン シャンブレー。キーターが何であれ、本当に皮肉な職人、シーンスター、農場から食卓までのバンクシー、オースティンのツイッター、フリーガンの信条、生のデニム、シングルオリジンのコーヒーのバイラル。

下のボタンにカーソルを合わせると、上、右、下、左の 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' })

マークアップ

ツールチップに必要なマークアップはdata属性のみでtitleあり、ツールチップを表示したい HTML 要素上にあります。生成されたツールチップのマークアップはかなり単純ですが、位置が必要です (デフォルトではtop、プラグインによって設定されます)。

ツールチップをキーボードおよび支援技術ユーザー向けに機能させる

ツールチップは、伝統的にキーボード フォーカス可能でインタラクティブな HTML 要素 (リンクやフォーム コントロールなど) にのみ追加する必要があります。属性を追加することで、任意の HTML 要素 ( <span>s など) をフォーカス可能にすることができますが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=""。

名前 タイプ デフォルト 説明
アニメーション ブール値 真実 ツールチップに CSS フェード トランジションを適用する
容器 文字列 | 要素 | 間違い 間違い

ツールチップを特定の要素に追加します。例: container: 'body'. このオプションは、トリガー要素の近くのドキュメントの流れにツールヒントを配置できるという点で特に便利です。これにより、ウィンドウのサイズ変更中にトリガー要素からツールヒントが浮かび上がるのを防ぐことができます。
遅れ 数 | 物体 0

ツールチップの表示と非表示の遅延 (ミリ秒) - 手動トリガー タイプには適用されません

数値が指定されている場合、表示/非表示の両方に遅延が適用されます

オブジェクト構造は次のとおりです。delay: { "show": 500, "hide": 100 }
html ブール値 間違い

ツールチップで HTML を許可します。

true の場合、ツールヒントの HTML タグがツールヒントtitleに表示されます。false の場合、jQuery のtextメソッドを使用してコンテンツを DOM に挿入します。

XSS 攻撃が心配な場合は、テキストを使用してください。
配置 文字列 | 関数 '上'

ツールチップの配置方法 - 自動 | トップ | ボトム | 左 | 左 | 右。
を指定するautoと、ツールチップの向きが動的に変更されます。

関数を使用して配置を決定する場合、ツールチップ DOM ノードを最初の引数として呼び出し、トリガー要素の DOM ノードを 2 番目の引数として呼び出します。thisコンテキストはツールチップ インスタンスに設定されます。
セレクタ 文字列 | 間違い 間違い セレクターが提供されている場合、ツールチップ オブジェクトは指定されたターゲットに委譲されます。実際には、これは、動的に追加された DOM 要素 (jQuery.onサポート) にツールチップを適用するためにも使用されます。これと有益な例を参照してください。
テンプレート ストリング '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

ツールチップの作成時に使用するベース HTML。

ツールチップtitleは に挿入されます.tooltip-inner。

.arrowツールチップの矢印になります。

最も外側のラッパー要素には、.tooltipクラスとrole="tooltip".
題名 文字列 | 要素 | 関数 ''

title属性が存在しない場合のデフォルトのタイトル値。

関数が指定されている場合thisは、ツールチップが添付されている要素に設定された参照で呼び出されます。
引き金 ストリング 「ホバーフォーカス」

ツールチップのトリガー方法 - クリック | ホバー | フォーカス | マニュアル。複数のトリガーを渡すことができます。スペースで区切ります。

'manual'.tooltip('show')、.tooltip('hide')および.tooltip('toggle')メソッドを介してプログラムでツールチップがトリガーされることを示します。この値は、他のトリガーと組み合わせることはできません。

'hover'単独では、キーボードからトリガーできないツールチップが生成され、キーボード ユーザーに同じ情報を伝える別の方法が存在する場合にのみ使用する必要があります。
オフセット 数 | ストリング 0 ターゲットに対するツールチップのオフセット。詳細については、Popper.js のオフセット ドキュメントを参照してください。
フォールバック配置 文字列 | 配列 「フリップ」 Popper がフォールバックで使用する位置を指定できるようにします。詳細については、Popper.js の動作に関するドキュメントを参照してください。
境界 文字列 | エレメント 「スクロール親」 ツールチップのオーバーフロー制約境界。'viewport'、'window'、'scrollParent'、または HTMLElement 参照 (JavaScript のみ)の値を受け入れます。詳細については、Popper.js のpreventOverflow docsを参照してください。

個々のツールチップのデータ属性

個々のツールチップのオプションは、上記で説明したように、データ属性を使用して指定することもできます。

メソッド

非同期メソッドと遷移

すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。

詳細については、JavaScript のドキュメントを参照してください。

$().tooltip(options)

ツールヒント ハンドラーを要素コレクションにアタッチします。

.tooltip('show')

要素のツールチップを表示します。ツールチップが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.tooltipこれは、ツールチップの「手動」トリガーと見なされます。タイトルの長さがゼロのツールチップは表示されません。

$('#element').tooltip('show')

.tooltip('hide')

要素のツールチップを非表示にします。ツールチップが実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。hidden.bs.tooltipこれは、ツールチップの「手動」トリガーと見なされます。

$('#element').tooltip('hide')

.tooltip('toggle')

要素のツールチップを切り替えます。ツールチップが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。これは、ツールチップの「手動」トリガーと見なされます。shown.bs.tooltiphidden.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 トランジションが完了するのを待ちます)。
挿入された.bs.tooltip このイベントはshow.bs.tooltip、ツールヒント テンプレートが DOM に追加されたときに、イベントの後に発生します。 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})