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

3ステップでツールチップを作成「jQuery Simple Tooltip」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。
3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。

使用方法
【STEP 1】
jQuery Simple Tooltipからファイルをダウンロードします。
【STEP 2】
以下を記述します。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.simpletooltip-min.js"></script>
<script>
$(function(){
$("#id名").simpletooltip();
});
</script>

【STEP 3】
<a id="demo" href="#tooltip">リンク元</a></p>
<div id="tooltip">表示コンテンツ</div>

以上、ちょっと強引な3ステップでした。
さて、このままでは見た目が悪いのでCSSで調整します。
例）
#tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;}
また、オプションは以下のようなものがあります。
showEffect: "fadeIn"　//表示エフェクト
hideEffect: "fadeOut" //閉じるエフェクト
click: true //クリック時にだけ作動

3ステップでツールチップを作成「jQuery Simple Tooltip」サンプル

記事作成：2009年03月25日

前の記事：これは面白い！jQueryで紙芝居のように画像をめくるJavaScript
次の記事：appleに倣え！jQueryで作るiPhoneライクなUI「jqtouch」