ツールチップ - プロ 成分
アニメーション用にCSS3を使用し、ローカルタイトルストレージ用にdata-attributesを使用して、CSSおよびJavaScriptでカスタムブートストラップツールチップを追加するためのドキュメントおよび例。
例
ツールチップを表示するには、下のリンクにカーソルを合わせてください:
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.
静的デモ
Four options are available: top, right, bottom, and left aligned.
インタラクティブデモ
Hover over the buttons below to see their tooltips.
And with custom HTML added:
使用法
ツールチッププラグインは、コンテンツとマークアップをオンデマンドで生成し、デフォルトでトリガー要素の後にツールチップを配置します。
JavaScriptを介してツールチップをトリガーする:
マークアップ
ツールチップに必要なマークアップは、ツールチップを取得したいHTML要素のデータ属性とタイトルのみです。 ツールチップの生成されたマークアップはかなりシンプルですが、位置が必要です(デフォルトでは、プラグインによってtopに設定されます)。
キーボードおよび支援技術ユーザー向けにツールチップを機能させる
ツールチップは、従来はキーボードフォーカス可能でインタラクティブなHTML要素(リンクやフォームコントロールなど)にのみ追加する必要があります。 任意のHTML要素( <span>
sなど)は、 tabindex =" 0 "
属性を追加することでフォーカス可能にできますが、これにより、キーボードユーザーにとって非インタラクティブな要素にタブストップが迷惑で混乱する可能性があります。 さらに、現在、ほとんどの支援技術はこの状況でツールチップを発表していません。
個々のツールチップのデータ属性
上記で説明したように、個々のツールチップのオプションは、代わりにデータ属性を使用して指定できます。
あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.