ツールチップ - プロ成分

アニメーション用にCSS3を使用し、ローカルタイトルストレージ用にdata-attributesを使用して、CSSおよびJavaScriptでカスタムブートストラップツールチップを追加するためのドキュメントおよび例。

例

ツールチップを表示するには、下のリンクにカーソルを合わせてください:

静的デモ

Four options are available: top, right, bottom, and left aligned.

インタラクティブデモ

Hover over the buttons below to see their tooltips.

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

使用法

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

JavaScriptを介してツールチップをトリガーする:

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

マークアップ

ツールチップに必要なマークアップは、ツールチップを取得したいHTML要素のデータ属性とタイトルのみです。ツールチップの生成されたマークアップはかなりシンプルですが、位置が必要です（デフォルトでは、プラグインによってtopに設定されます）。

キーボードおよび支援技術ユーザー向けにツールチップを機能させる

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

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

個々のツールチップのデータ属性

上記で説明したように、個々のツールチップのオプションは、代わりにデータ属性を使用して指定できます。

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.

ツールチップ - プロ 成分

例