Facebook風のツールチップを実現するJavaScript「tipsy」

jQueryを使用してFacebookスタイルのツールチップを実現する「tipsy - Facebook-style tooltip plugin for jQuery」です。
ツールチップとは吹き出しのようなもので、リンクや画像などの説明をわかりやすく表示してくれます。
Facebook風のツールチップを実現するJavaScript「tipsy」サンプル

使用方法
tipsyからファイルをダウンロードします。
<link rel="stylesheet" type="text/css" href="tipsy.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('#id名').tipsy({
gravity: 'w', //どこに向かって出るか s,n,w,e
fade: true, //フェードさせるか
fallback: "良い?" //titleではなくscript側で指定したい場合
});
});
</script>

上記を記述後、あとはidを付与すれば完成です。
<p id="id名" title="表示テキスト">テキスト</p>
Facebook風のツールチップを実現するJavaScript「tipsy」サンプル

sponsors

「Facebook風のツールチップを実現するJavaScript「tipsy」」をシェアする

記事作成:
記事URL:

TOP > > > Facebook風のツールチップを実現するJavaScript「tipsy」