Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Tooltips (ツールチップ)

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

目次

Overview

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

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-toggle属性で選択することです。

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

Examples

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

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

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

Usage

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

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

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

Tooltip の位置は、親コンテナに .table-sensitive のように overflow:autooverflow: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 だけに頼ってはいけません。

<!-- 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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Disabled elements

フォーカスしたり、ホバーしたり、クリックしたりしてツールチップ(またはポップオーバー)を起動することはできません。 回避策としては、ラッパー <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>

Options

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

セキュリティ上の理由から、sanitize, sanitizeFn および whiteList オプションはデータ属性を用いて指定することができないことに注意してください。
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). 総裁は thisan 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 になります。

offset number | string | function 0

ターゲットに対するオフセット。

オフセットを決定するために関数を使用する場合、オフセットデータを含むオブジェクトを第一引数として呼び出します。この関数は、同じ構造のオブジェクトを返さなければなりません。第2引数には、トリガとなる要素DOMノードが渡されます。

総裁は Popper.js's offset docsを参照してください。

fallbackPlacement string | array 'flip' フォールバック時に Popper がどの位置を使用するかを指定することができます。 詳細は Popper.js's behavior docsを参考にしてください。
boundary string | element 'scrollParent' オーバーフロー制約境界。 'viewport', 'window', 'scrollParent', または HTMLElement 参照 (JavaScript のみ) の値を受け取ります。詳細は Popper.js's preventOverflow docsを参考にしてください。
sanitize boolean true サニタイズを有効にするか無効にします。有効にした場合、'template''title'オプションはサニタイズされます。
whiteList object Default value 許可された属性とタグを含むオブジェクト
sanitizeFn null | function null ここでは、独自のサニタイズ関数を指定することができます。これは、サニタイズを実行するために専用のライブラリを使いたい場合に便利です。
popperConfig null | object null デフォルトのPopper.jsの設定を変更するには Popper.js'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()

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