てるてるブログ

てるてるぼうずの日常やらお勉強やら

おしゃれで手軽にツールチップ「Build a Better Tooltip with jQuery Awesomeness」

Posted on | 12月 12, 2011 | No Comments

ツールチップマウスオーバで「吹き出し」が現れる「ツールチップ」。
ロールオーバーと似てるけど、ツールチップの方は吹き出しの位置が割と自由に設定出来るってことでしょうか?ロールオーバだともとの要素も置き換えられちゃいますしね。
高機能なやつだと画像だけじゃなくて文字とか色々なメディア類も表示出来るものもあるようです。

このツールチップ系のjQuaryライブラリから最近使ったのが、「Build a Better Tooltip with jQuery Awesomeness

吹き出しが上から落ちてくるようなエフェクトと半透明の枠が可愛いです。
基本的には吹き出し内に入れられるのは文章だけのようです。
ちょっとした注意事項だけ吹き出しに…って時には手軽に導入出来そう。

以下設置メモ↓

Build a Better Tooltip with jQuery Awesomeness」よりソースをDL。
デモはこちら

headタグ内にDLしたフォルダ内のjsフォルダ内にあるjsファイルをリンク。

<script type="text/javascript" src="../js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.betterTooltip.js"></script>

デモのソースを見てもらえれば分かりますが、マウスオーバーさせたい要素の部分に「class=”tTip” id=”cloud1″」を追加すると下記のようなコードの吹き出しが生成されます。

<div class="tip">
 <div class="tipMid"></div>
 <div class="tipBtm"></div>
</div>

tTipというクラス名の要素の上にマウスオーバーするとtipというクラス名の要素(吹き出し)が表示される…ってことかな?(いまだに“要素”とか“セレクタ”とかの使い方が曖昧…)
吹き出し内の文章はマウスオーバーする要素のtitle属性で指定します。

これに沿って吹き出しの枠の画像を作ってもいいし、デフォルトの枠が半透明の画像でも十分可愛いです。
枠画像の作成方法というか詳細もDLページにあるので参考に。
画像を適用させるCSSもDLページやサンプルの方にあります。

上から落ちてくるアニメーションの速度はjquery.betterTooltip.jsの最初の方にあるデフォルトの数値をいじってもいいですし、head内の下記のコードでの指定も可。

$(document).ready(function(){
 $('.tTip').betterTooltip({speed: 150, delay: 300});
});

吹き出しの位置の指定はjquery.betterTooltip.jsの最後付近にある

setTip = function(top, left){
 var topOffset = tip.height();
 var xTip = (left-30)+"px";
 var yTip = (top-topOffset-60)+"px";
 tip.css({'top' : yTip, 'left' : xTip});
}

この辺りの数字を適当にいじって変更。

マウスオーバする要素の方に指定されている#cloud1の(top, left)の値から来ているようなのでCSSの方でそこの数値もちょっといじってやる必要があるみたいです。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin