ツールチップ
これはスマホのインテントみたいなかんじで
マウスオーバーとかで文字がでる
<a href=”#” rel=”tooltip” data-original-title=”補足情報”>tooltip</a>
これでできる
必要なのは
rel=”tooltip”
そして
data-original-title=”” に表示したい文字を記述する
ソースにすると
<a href=”#” rel=”popover” data-original-title=”補足情報” data-content=”もっ>と詳しい内容”>popover</a>
あと、重要なこととして
これはcanvas とか webstrage みたいに
java script が必要
なので、
<script>
$(function(){
$(‘a[rel=tooltip]’).tooltip();
});
</script>
とする
また
$(‘a[rel=tooltip]’).tooltip();
を
$(‘a[rel=tooltip]’).tooltip({‘placement’: ‘bottom’});
とすれば
下にでるので見やすくなる
tooltip();
は bootstrap に入っている
ポップオーバー
こちらは、ツールチップより詳しく表示できる
まず、ツールチップと同じように
data-original-title=””へ表示したい文字列
さらに
data-content=”” へもっと詳しい内容
を表示する
これも、ツールチップみたいに
java script でコントロールする
なので、script タグが必要
$(‘function(){
$(‘a[rel=popover]’).popover();
});
となる
他にもオプションをつけれるようなので
http://twitter.github.io/bootstrap/javascript.html#popovers
を参考にするとサンプルがあってわかりやすい
ツールチップとポップオーバーに関しては
ドットインストールで動画で分かりやすく解説されているんどえ
こちらも参考にするとわかりやすいのでおすすめ
http://dotinstall.com/lessons/basic_twitter_bootstrap_v3/8818