Tips!Bootstrap3 tooltipを常に表示する

Bootstrap3 tooltipを使うとマウスオーバー時にtooltipが表示されるのですが、常に表示しておきたかったので挑戦してみました。

HTML

表示タイミングを変えるには、data-triggerオプションを使用します。
data-triggerオプションには以下の四つのうちどれか（複数可）を指定することができます。

• click（クリック時に表示）
• hover（マウスオーバー時に表示）
• focus（フォーカス時に表示）
• manual（自前の方法で呼び出す）

今回は、click,hover,focusではないタイミングで表示したいためmanualを指定します。
これでマウスオーバーしてもtooltipは表示されなくなります。

<button id="continuous-tip" class="btn" data-toggle="tooltip" data-trigger="manual" title="はーい!">ボタン</button>

jQuery

tooltipのshowメソッドで強制的にツールチップを表示します。

$('#continuous-tip').tooltip('show');

See the Pen Bootstrap3 Tooltip 開いておく by hebisan (@climbFrog) on CodePen.

はい、簡単でしたね。

参考:Bootstrap3日本語リファレンス

(byへびさん）