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

リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

忙しい世の中、リンク先のことも知りたい人がいるかもしれません。
そんな時、リンク先の説明を吹き出しで説明できるTooltipがあります。
Tooltip PluginはjQueryでTooltipを実現しています。

使用方法
Tooltip Pluginからjquery.tooltip.jsとjquery.tooltip.cssを、jQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="http://yourdomain/jquery.tooltip.css" type="text/css">
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('要素').Tooltip()
});
</script>
以上で指定した要素にマウスを乗せると説明が表示されます。
＊要素をaにした場合。
<a href="リンクURL" title="説明">リンク</a>
またオプションには以下のようなものがあります。
　・URLの表示：showURL:true/false
　・区分：showBody:" - "（""内に書いた文字より前がタイトル、後が本文に）
　・デザイン：extraClass: "pretty/pretty fancy"
リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」サンプル

記事作成：2008年01月10日

前の記事：超クールなカレンダーjavascript「Calendar」
次の記事：スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」