ヒントを表示するツールチップを付ける
data-toggle="tooltip"
data-placement="{left,top,bottom,right}"
data-original-title="{text}"
これはjQueryPluginなのでjQueryコードを書く必要が有ります。
1 2 3 | $(function () { $('[data-toggle="tooltip"]').tooltip()}) |
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip(); }) </script> <a href="#" class="label label-info" data-toggle="tooltip" data-original-title="説明">上に説明を表示</a> <a href="#" class="label label-info" data-toggle="tooltip" data-placement="left" data-original-title="説明">左に説明を表示</a> <a href="#" class="label label-info" data-toggle="tooltip" data-placement="bottom" data-original-title="説明">下に説明を表示</a> <a href="#" class="label label-info" data-toggle="tooltip" data-placement="right" data-original-title="説明">右4に説明を表示</a> <p>文中でツールチップを表示する。これは<span class="text-danger" data-toggle="tooltip" data-original-title="説明">jQueryPlugin(ココ)</span>なのでjQueryコードを書く必要が有ります。</p><p></p> |
ポップするバーを付ける
これはjQueryPluginなのでjQueryコードを書く必要が有ります。
1 2 3 | $(function () { $('[data-toggle="popover"]').popover();}) |
押させるという事が必要なので、利用シーンはどうでしょう・・・うーん。
1 2 3 | <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="ヒントが表示されましたか？" data-original-title="" title=""> 押すとポップアップ</button> |