Tooltips

Tooltips(ツールチップ)を追加するためのドキュメントと例です。ツールチップの使い方の例を示します。

Overview

ツールチップを使用するときに知っておくべきことは下記です。：

• ツールチップの位置は Popper.js に依存します。 popper.min.js を bootstrap.jsの前におくか, Popper.jsを含む bootstrap.bundle.min.js / bootstrap.bundle.js を使用する必要があります。
• JavaScriptをソースから構築するには requires util.js を使用します。
• ツールチップはパフォーマンスの理由でオプトイン(任意)で取得されるため, 初期化する必要があります。
• 長さが0のタイトルのツールチップは表示されません。
• container: 'body' を指定すると, 複雑なコンポーネント（インプットグループやボタングループなど）のレンダリングの問題が回避可能です。
• 隠された要素のツールチップをトリガーすることはできません。
• .disabled または disabled 要素のツールチップはそれを囲む要素で起動する必要があります。
• 複数の行にまたがるハイパーリンクからトリガされると, ツールチップが中央に配置されます。この動作を避けるために <a> に white-space: nowrap; をラップしてください。
• ツールチップは, 対応する要素がDOMから削除される前に非表示にする必要があります。

下記の例をみてください。

Example: Enable tooltips everywhere

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

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

Examples

ツールチップを表示するには, 以下のリンクをホバーしてください。

下記のボタンをホバーすると上, 右, 下, 左の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>

And with custom HTML added:

<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>

Usage

ツールチップは, コンテンツとマークアップを生成します。デフォルトでは, ツールチップはトリガー要素の後に配置されます。

JavaScript経由でツールチップをトリガします。

$('#example').tooltip(options)

$('#example').tooltip({ boundary: 'window' })

Markup

ツールチップに必要なマークアップは data 属性と HTML要素の title だけです。 生成されたツールチップのマークアップは位置が必要です（デフォルトでは, プラグインによって top に設定されています）。

<!-- 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 elements

disabled 属性をもつ要素はインタラクティブではないので ユーザーがフォーカス , ホバー, クリックしてツールチップ（またはポップオーバー）を起動することはできません。

As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

回避策として tabindex="0" を適用して <div> または <span> をラッパーしてツールチップを起動し, 無効化された要素の 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>

Options

オプションは, データ属性またはJavaScriptを使用して渡すことができます。 データ属性の場合 data- にオプション名を適用します( data-animation =" " のように)

方法(Methods)

$().tooltip(options)

要素にツールチップハンドラーをつけます。

.tooltip('show')

ツールチップを表示します。ツールチップが表示される前（ shown.bs.tooltip の発動前）に呼び出し元に戻ります。 これは, ツールチップの “manual” トリガーとみなされる。タイトルの長さが0のツールチップは表示されません。

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

.tooltip('hide')

ツールチップを非表示にする。ツールチップが非表示になる前（ hidden.bs.tooltip の前）に呼び出し元に戻ります。 ツールチップの “manual” トリガーとみなされます。

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

.tooltip('toggle')

ツールチップを切り替えます。ツールチップが表示/非表示になる前（ shown.bs.tooltip , hidden.bs.tooltip の発動前）に呼び出し元に戻ります。 ツールチップの “manual” トリガーとみなされる。

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

.tooltip('dispose')

ツールチップを非表示にしたり破棄したりします。 the selector option を使用して作成されます。 デリゲートを使用するツールチップは, 子孫トリガー要素で個別に破棄できません。

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

.tooltip('enable')

ツールチップに表示する機能を与えます。デフォルトは有効です。

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

.tooltip('disable')

ツールチップを表示する機能を削除します。ヒントが再度有効になっている場合にのみ, ツールチップを表示することができます。

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

.tooltip('toggleEnabled')

ツールチップの表示/非表示にするかを切り替えます。

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

.tooltip('update')

ツールチップの位置を更新します。

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

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})