twitter-bootstrap => ツールチップ

備考

ツールヒントは、小さなポップアップボックスのように見えるユーザーインターフェイス要素です。これは通常、ユーザーがポインタをクリックせずに他の要素にポインタを置くとトリガーされます。

パフォーマンス上の理由から、ツールチップをjQueryで初期化する必要があります。次のコードは、DOM内のすべてのツールチップを有効にします。

<script>
   $(document).ready(function(){
       $('[data-toggle="tooltip"]').tooltip();
   });
</script>

ツールチップの配置

デフォルトでは、要素の上にツールチップが表示されます。 data-placement属性を使用して、要素の上、下、左または右にツールチップの位置を設定できます。

<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a

data-placement="auto"を使用して、ツールチップを動的に再調整することもできdata-placement="auto" 。次の例のツールチップは、可能であればツールチップを左に表示し、そうでない場合は右に表示します。

<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a

基本的な例

ツールチップを作成するには、 data-toggle="tooltip"属性と、ツールチップを持つHTML要素のtitleを追加するだけです。 Title属性は、ツールチップ内に表示されるテキストを指定するために使用されます。

<span data-toggle="tooltip" title="Hello world!">Hover over me</span>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

twitter-bootstrap
ツールチップ

サーチ…

備考

ツールチップの配置

基本的な例