tooltip.js

このツールチップは、Jason Frame氏による素晴らしいjQuery.tipsyプラグインに影響を受けています。 バージョンが更新され、アニメーションのために画像ではなくCSS3を使用し、 またローカルのタイトル保管用にdata属性を使用するようになりました。

文字長ゼロのタイトルのツールチップが表示されることはありません。

• 使用例
• 使用方法
• オプション
• メソッド
• イベント

使用例

下記のリンクにカーソルを当てて、ツールチップの動作を確認してください。

静的なツールチップ

top、right、bottom、leftの寄せのための4つのオプションが利用可能です。

4方向

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

使用方法

ツールチッププラグインは要求に応じたコンテンツとマークアップを生成し、 そしてデフォルトで発火要素の後ろにツールチップを配置します。

JavaScriptを通じてツールチップを発火する場合は次のようにします。

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

マークアップ

ツールチップに必須となるマークアップは、data属性とツールチップに表示させたいHTML要素のtitleのみです。 ツールチップの生成されるマークアップは、位置を必要とするものの(デフォルトでは、プラグインによってtopに設定)シンプルなものです。

<!-- 実際にHTMLとして書くもの -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- プラグインによって生成されるマークアップ -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

複数行のリンク
時に、あなたは複数行を囲うリンクに対してツールチップを追加したいと考えるかもしれません。 ツールチッププラグインのデフォルトの挙動では、水平方向と垂直方向の中央に配置されます。 これを避けるために、アンカー要素にwhite-space: nowrap;を追加してください。

ボタングループとinputグループ内のツールチップに必須となる特別な設定
.btn-groupまたは.input-group内の要素にツールチップを使用する際に、 思わぬ副作用(ツールチップがトリガされた際の要素の幅の間延び/角丸の喪失のような)を避けるためにオプションにcontainer: 'body'(後述)を指定する必要があります。

非表示(hidden)要素でツールチップを表示しようとしないでください
display: none;の要素を対象として$(...).tooltip('show')を実行すると、 ツールチップはふさわしくない場所に位置取りされてしまいます。

ツールチップへのキーボードによるアクセスと支援技術を必要とするユーザーについて
キーボードを使用するユーザーへのナビゲーションと支援技術を必要とする特定のユーザーのために、 リンク、フォーム要素、またはtabindex="0"の属性を持つ任意の要素のような、 キーボードでフォーカス可能な要素にのみツールチップを追加するべきです。

無効化(disabled)要素でのツールチップはラッパー要素を必要とします
disabledまたは.disabled要素にツールチップを追加するために、 その要素を<div>の中に配置し、代わりにその<div>にツールチップを適用します。

オプション

オプションはdata属性またはJavaScriptを介して渡すことが可能で、 data属性であればdata-animation=""のようにして、オプション名をdata-の後ろに追加します。

<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>

ツールチップへの特定のdata属性
前述したように、特定のツールチップのためのオプションはdata属性を使用することで代わりに指定することが可能です。

メソッド

$().tooltip(options)

対象の要素集合に対してツールチップを割り当てます。

.tooltip('show')

その要素のツールチップを表示します。 ツールチップが実際に表示される前に、呼び出し元へ返されます。 (つまり、shown.bs.tooltipイベントの発生前) これは、ツールチップの"manual"トリガに対して考慮されたものです。 titleの文字列長がゼロのツールチップが表示されることはありません。

$('#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('destroy')

対象の要素のツールチップを非表示にして削除します。 委譲(delegation)を使用するツールチップ(selectorオプションを使用して作成された)は、 子孫のトリガ要素を個別に削除することは出来ません。

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

イベント

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

 Back to top