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

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

sponsors

使用方法

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>

サンプル

デモ1 デモ2


Javascriptサンプルページ一覧
skuare.net