Skip to main content Skip to docs navigation
View on GitHub

Tooltips (ツールチップ)

CSSとJavaScriptでカスタムBootstrapのツールチップを追加するためのドキュメントと例。

On this page

Overview

ツールチッププラグインを使うときに知っておきたいこと

  • Tooltips の配置は 3rd party library Popper に依存します。bootstrap.jsの前にpopper.min.jsをインクルードするか、Tooltips を動作させるためにはPopper.jsをインクルードしたbootstrap.bundle.min.js / bootstrap.bundle.jsを使用する必要があります。
  • Tooltipsはパフォーマンス上の理由でオプトインされているため、自分で初期化する必要があります。
  • 長さゼロのタイトルを持つツールチップは表示されません。
  • 複雑なコンポーネント(入力グループやボタングループなど)でのレンダリングの問題を避けるために container: 'body' を指定します。
  • 隠された要素で tooltips をトリガーすると機能しません。
  • .disabled や disabled 要素の tooltips は、ラッパー要素上でトリガされなければなりません。
  • 複数行にまたがるハイパーリンクからトリガーされた場合、tooltips は中央に配置されます。この動作を避けるには、<a>に white-space: nowrap; を使用してください。
  • Tooltips は、対応する要素が DOM から削除される前に非表示にしなければなりません。
  • Tooltips は、shadow DOM 内の要素のおかげでトリガーすることができます。
By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the sanitizer section in our JavaScript documentation for more details.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

サンプルを参考にしてください。

Example: Enable tooltips everywhere

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Examples

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

Placeholder text to demonstrate some inline linkswith tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

下のボタンにカーソルを合わせると、上、右、下、左の4つのツールチップの方向が表示されます。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Cutom HTML を追加した場合

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

With an SVG:

Usage

tooltip プラグインは、オンデマンドでコンテンツとマークアップを生成し、デフォルトではトリガー要素の後にツールチップを配置します。

JavaScript で tooltip をトリガーする場合:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto and scroll

Tooltip　の位置は、親コンテナに .table-responsive　のように　overflow：auto や overflow：scroll がある場合に自動的に変更されますが、元の配置の位置は保持されます。 解決するには、 boundary オプションをデフォルト値 'scrollParent' 以外(例えば 'window')に設定します。

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: 'window'
})

Markup

Tooltip に必要なマークアップは、 Tooltip を作成したいHTML要素の data 属性と title だけです。 Tooltip のマークアップは単純ですが、位置を指定する必要があります(デフォルトではプラグインによって top に設定されています)。

Making tooltips work for keyboard and assistive technology users

Tooltips を追加すべきなのは、キーボードフォーカスが可能でインタラクティブなHTML要素（リンクやフォームコントロールなど）のみです。 任意のHTML要素（ <span> など）は、tabindex="0" 属性を追加することでフォーカス可能にすることができますが、 これはキーボードユーザにとっては非インタラクティブな要素のタブストップが追加されてしまうので、 キーボードユーザが混乱する可能性があり、現在ほとんどの支援技術はこのような状況でのツールチップをアナウンスしません。 また、ツールチップのトリガーとして hover だけに頼ってはいけません。これにより、キーボードユーザーが Tooltips をトリガーできなくなります。 

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Disabled elements

disabled属性を持つ要素はインタラクティブではありません。つまり、ユーザーはそれらにフォーカスしたり、ホバーしたり、クリックしたりしてツールチップ（またはポップオーバー）をトリガーすることはできません。 回避策としては、ラッパー <div> や <span> でツールチップをトリガーし、理想的には tabindex="0" でキーボードフォーカス可能にして、 無効要素の pointer-events をオーバーライドします。

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Options

オプションは、データ属性またはJavaScriptで渡すことができます。データ属性の場合は、 data-bs-animation =" "のように、オプション名を data-bs-に追加します。

セキュリティ上の理由から、sanitize, sanitizeFn および allowList オプションはデータ属性を用いて指定することができないことに注意してください。

Name Type Default Description
animation boolean true CSSのフェード遷移を適用します。
container string | element | false false

特定の要素に tooltip を追加します。例 container: 'body'. このオプションは、文書の流れの中で tooltip をトリガ要素の近くに配置することができるので、便利です。 - ウィンドウのサイズ変更中にツールチップがトリガー要素から離れて浮いてしまうのを防ぐためのものです。
delay number | object 0

tooltip の表示と非表示の時間 (ms) - 手動トリガータイプには適用されません。

数値が与えられた場合、非表示/表示の両方に遅延が適用されます。

オブジェクト構造は delay: { "show": 500, "hide": 100 }
html boolean false

HTMLを許可する。

trueの場合、 title 内のHTMLタグが tooltip 内にレンダリングされます。 innerText プロパティは DOM にコンテンツを挿入するために使用されます。

XSS攻撃が気になる場合はテキストを使用してください。
placement string | function 'top'

配置方法 - auto | top | bottom | left | right.
When auto を指定すると、動的に tooltip の向きを変えてくれます。

配置を決定するために関数を使用する場合、tooltip DOMノードを第1引数に、トリガー要素DOMノードを第2引数にして呼び出されます。this コンテキストには、tooltip のインスタンスが設定されます。
selector string | false false セレクターが提供されている場合、tooltip オブジェクトは指定されたターゲットに委任されます。 実際には、これは動的に追加されたDOM要素に tooltip を適用するためにも使用されます (jQuery.on support). 総裁は this と an informative exampleを参考にしてくさい。
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

tooltip を作成する際に使用する基本HTML。

ツールチップのtitleは.tooltip-innerに適用されます。

.tooltip-arrow が tooltip の矢印になります。

一番外側のラッパー要素は、.tooltipクラスとrole="tooltip"を持っていなければなりません。
title string | element | function ''

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

関数が与えられた場合は、そのthis 参照がツールチップが添付されている要素に設定された状態で呼び出されます。
trigger string 'hover focus'

トリガーの方法 - click | hover | focus | manual. 複数のトリガーを渡すことができます。

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

'hover'を単独で使用すると、キーボードからトリガーすることができない tooltip になります。
fallbackPlacements null | array null フォールバック時に Popper がどの位置を使用するかを指定することができます。 詳細は Popper.js's behavior docsを参考にしてください。
boundary string | element 'clippingParents' オーバーフロー制約境界。 デフォルトでは 'clippingParents' であり, HTMLElement 参照 (JavaScript のみ) の値を受け取ります。詳細は Popper's preventOverflow docsを参考にしてください。
customClass string | function ''

ツールチップが表示されたら、ツールチップにクラスを追加します。これらのクラスは、テンプレートで指定されたクラスに加えて追加されることに注意してください。複数のクラスを追加するには、スペースで区切ります： 'class-1 class-2'

追加のクラス名を含む単一の文字列を返す関数を渡すこともできます。参考: sanitizer section in our JavaScript documentation
sanitize boolean true サニタイズを有効にするか無効にします。有効にした場合、'template'と'title'オプションはサニタイズされます。
allowList object Default value 許可された属性とタグを含むオブジェクト
sanitizeFn null | function null ここでは、独自のサニタイズ関数を指定することができます。これは、サニタイズを実行するために専用のライブラリを使いたい場合に便利です。
popperConfig null | object null デフォルトのPopper.jsの設定を変更するには Popper's configurationを参考にしてください。

Data attributes for individual tooltips

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

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

show

tooltip 要素を表示します。 tooltip が実際に表示される前に呼び出し元に戻ります。 (shown.bs.tooltip が発生する前). “manual” トリガーとみなされます。tooltip　のトリガを設定します。長さゼロのタイトルの場合は tooltip は表示されません。

tooltip.show()

hide

tooltip 要素を非表示します。 tooltip が実際に隠される前に呼び出し元に戻ります。 (hidden.bs.tooltip が発生した時). “manual” トリガーとみなされます

tooltip.hide()

toggle

tooltip 要素をトグルします。 tooltip が実際に表示または非表示になる前に呼び出し元に戻ります。 ( shown.bs.tooltip または hidden.bs.tooltip が発生した時).“manual” トリガーとみなされます。

tooltip.toggle()

dispose

tooltip 要素を非表示して、破棄します。 委任を使用するツールチップは (the selector option を使用している) 子孫のトリガ要素を個別に破壊することはできません。

tooltip.dispose()

enable

tooltip 要素に表示する機能を与えます。. デフォルトで有効になっています。

tooltip.enable()

disable

tooltip 要素を表示する機能を削除します。tooltip は再有効化された場合にのみ表示されます。

tooltip.disable()

toggleEnabled

tooltip 要素の表示・非表示を切り替えます。

tooltip.toggleEnabled()

update

tooltip 要素の位置を更新します。

tooltip.update()

getInstance

DOM要素に関連付けられたツールチップインスタンスを取得できる静的メソッド

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Events

Event type Description
show.bs.tooltip showインスタンスメソッドが呼び出されたときにすぐに発生します。
shown.bs.tooltip tooltip がユーザーに表示されたときに発生します（CSS トランジションが完了するのを待ちます）。
hide.bs.tooltip hideインスタンスメソッドが呼び出されたときに発生します。
hidden.bs.tooltip tooltip の非表示が完了したときに発生します（CSS トランジションが完了するのを待ちます）。
inserted.bs.tooltip tooltip が DOM に追加されて、show.bs.tooltip イベントの後に発生します。 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()