ツールチップ
上付きのツールチップ
data-placementを指定しない場合、自動的に上付きのツールチップとなります。
<p class="tooltip起動用クラス" data-toggle="tooltip" title="上付きのツールチップ"></p>
下付きのツールチップ
<p class="tooltip起動用クラス名" data-toggle="tooltip" data-placement="bottom" title="下付きのツールチップ"></p>
右付きのツールチップ
<p class="tooltip起動用クラス名" data-toggle="tooltip" data-placement="right" title="右付きのツールチップ"></p>
左付きのツールチップ
<p class="tooltip起動用クラス" data-toggle="tooltip" data-placement="left" title="左付きのツールチップ"></p>
JavaScriptを追加します。
$(".tooltip起動用クラス名[data-toggle=tooltip]").tooltip("show");
ツールチップの中をスタイリング
data-html属性にtrueを指定することでツールチップのtitle属性の中をマークアップできます。
#tooltip_html
上付きのツールチップ
小さいテキスト
小さいテキスト
<p class="tooltip起動用クラス" data-toggle="tooltip" title="上付きのツールチップ<br><small>小さいテキスト</small>" data-html="true"></p>
ツールチップのカラーバリエーション
#tooltip_top
Default
#tooltip_top_primary
Primary
#tooltip_top_info
Info
#tooltip_top_warning
Warning
#tooltip_top_danger
Danger
#tooltip_top_inverse
Inverse
<p class="tooltip起動用クラス" data-toggle="tooltip" title="Default"></p> <p class="tooltip起動用クラス tooltip-primary" data-toggle="tooltip" title="Primary"></p> <p class="tooltip起動用クラス tooltip-info" data-toggle="tooltip" title="Info"></p> <p class="tooltip起動用クラス tooltip-warning" data-toggle="tooltip" title="Warning"></p> <p class="tooltip起動用クラス tooltip-danger" data-toggle="tooltip" title="Danger"></p> <p class="tooltip起動用クラス tooltip-inverse" data-toggle="tooltip" title="Inverse"></p>