Bootstrap JS ツールチップ

❮ 前章へ 次のリファレンス ❯

JS ツールチップ (tooltip.js)

ツールチッププラグインは、ユーザが要素の上にマウスポインタを移動したときに表示される、小さなポップアップボックスです。

ツールチップに関するチュートリアルは、Bootstrap ツールチップ・チュートリアルご覧ください。

data-* 属性を介して

data-toggle="tooltip" は、ツールチップをアクティブにします。

title 属性は、ツールチップ内に表示するテキストを指定します。

例

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Try it Yourself »

JavaScript を介して

ツールチップは、CSS だけのプラグインではありませんので、jQuery で初期化しなければなりません： 指定の要素を選択して、tooltip() メソッドを呼び出します。

例

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Try it Yourself »

ツールチップ・オプション

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

名前 型 デフォルト 説明 Try it
animation boolean true

ツールチップを表示したり隠したりする時に、CSS のフェードトランジション効果を追加するかどうかを指定する

  • true - フェード効果を追加する
  • false - フェード効果を追加しない
 Try it
container 文字列、またはブール値の false false 指定の要素にツールチップを付加する。
例：container: 'body'		 Try it
delay 数値、またはオブジェクト 0 ツールチップを開いたり、閉じたりするのにかかる時間をミリ秒単位で指定する。

開くための遅延と、閉じるための遅延を指定するにはオブジェクト構造を使用する：

delay: {show: 500, hide: 100} - ツールチップを開くのに 500 ms かかるが、閉じるのは 100 ms です		 Try it
html ブール値  false ツールチップで HTML タグを容認するかどうかを指定する：
 
  • true - HTML タグを容認する
  • false - HTML タグを容認しない
注: HTML は、title 属性に挿入しなければならない（または title オプションを使用）。

false (デフォルト) に設定したときは、jQuery の text() メソッドが使われる。 XSS 攻撃が心配な場合は、これを使用する		 Try it
placement 文字列 "top" ツールチップの位置を指定する。指定できる値：

  • "top" - ツールチップを上に
  • "bottom" - ツールチップを下に
  • "left" - ツールチップを左に
  • "right" - ツールチップを右に
  • "auto" - ツールチップの位置をブラウザに決定させる。 例えば、値が "auto left" の場合、可能な場合は左に表示されるが、そうでなければ右に表示される。 値が "auto bottom" の場合、可能な場合は下に表示されるが、そうでなければ上に表示される。
 Try it
selector 文字列、またはブール値の false false ツールチップを指定のセレクタに追加する Try it
template 文字列   ツールチップを作成する際に使用するベースの HTML。

ツールチップのタイトルは、クラス .tooltip-inner を持つ要素と、ツールチップの矢印になるクラス .tooltip-arrow を持つ 要素に挿入される。

最も外側のラッパー要素は .tooltip クラスを持つ必要がある。
title 文字列 "" ツールチップ内に表示するテキストを指定する Try it
trigger 文字列 "hover focus" ツールチップのトリガ方法を指定する。指定できる値：

  • "click" - クリックでツールチップをトリガする
  • "hover" - ホバーでツールチップをトリガする
  • "focus" - タブやクリックなどでフォーカスを取得した時にツールチップをトリガする
  • "manual" - 手動でツールチップをトリガする
チップ: 複数の値を渡すときは、スペースで区切ります		 Try it
viewport 文字列,、またはオブジェクト {selector: "body", padding: 0} この要素の境界内にツールチップをキープする。

例：viewport: '#viewport' または {selector: '#viewport', padding: 0}

ツールチップ メソッド

次の表は、使用できる全ツールチップメソッドの一覧です。

メソッド 説明 Try it
.tooltip(options) オプション付きでツールチップをアクティブにする。有効な値については、上記オプションを参照のこと Try it
.tooltip("show") ツールチップを表示する Try it
.tooltip("hide") ツールチップを隠す Try it
.tooltip("toggle") ツールチップを切替える Try it
.tooltip("destroy") ツールチップを隠して破壊する Try it

ツールチップ Events

次の表は、使用できる全ツールチップイベントの一覧です。

イベント 説明 Try it
show.bs.tooltip ツールチップ が表示されようとしているときに発生 Try it
shown.bs.tooltip ツールチップ が完全に表示されたときに発生 (CSS のトランジションが完了した後) Try it
hide.bs.tooltip ツールチップ が隠されようとしているときに発生 Try it
hidden.bs.tooltip ツールチップ が完全に隠されたときに発生 (CSS のトランジションが完了した後) Try it
Examples

例

カスタム・ツールチップ・デザイン

CSS を使用して、ツールチップの外観をカスタマイズします：

例

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Try it Yourself »

❮ 前章へ 次のリファレンス ❯