[javascript]jQueryやprototypeに依存しないツールチップ

ツールチップを表示するときに、「ツールチップ何だし別に多機能じゃなくてもいいや！」というときなどに重宝するようなツールチップを紹介します。

Fading JavaScript Tooltips 2kb  - Web Development Blogさんよりソースをダウンロードします。
Click here to download the script.からダウンロードすることができます。

使い方

jsファイルと、cssファイルを読み込みます。

<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” language=”javascript” src=”script.js”></script>

ツールチップを表示する際に必要な画像は先ほどダウンロードしたフォルダの中に「images」とありますので、その中の画像を変更すると、枠だけ変更可能になります。

次に、ツールチップを表示するリンクへの設定を行います。

例)

<a href=”../company.html” title=”会社概要” onmouseover=”tooltip.show(‘<p>弊社の会社概要を掲載しています。</p>’);” onmouseout=”tooltip.hide();”>

onmouseoverに指定する「tooltip.show()」はツールチップを表示します。

かっこ「()」の中に表示したい文字を入力すると、その文字がツールチップの中に表示されます。

onmoouseoutに指定する「tooltip.hide()」はマウスが離れたらツールチップを消します。

こんな簡単に使えるなら、がんがん使っていきたいですね。

jQueryに依存しすぎると重くなってくるということもあるので、単純なスクリプトを使うのもいいかも知れません