skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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」サンプル

記事作成：2009年12月28日

前の記事：jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」
次の記事：ほろ酔い支援ツール「ホロヨッター」リリース