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

ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。
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」サンプル

sponsors

「3ステップでツールチップを作成「jQuery Simple Tooltip」」をシェアする

記事作成:
記事URL:

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