FC2ブログ

ツールチップとポップオーバー

ツールチップ
これはスマホのインテントみたいなかんじで
マウスオーバーとかで文字がでる
<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
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック