jquery.tooltipster.js:リンクにフキダシ(ツールチップ)を表示してくれるJs



リンクタグのtitle属性に設定のテキストを
マウスオーバー時に吹き出し(ツールチップ)表示します。

過去に、
BUBBLETOOLTIPS.JS:リンクタグのTITLEを噴出し表示するJS
をご紹介しましたが同じ様な感じです。
(上記過去記事のタイトルですが「~噴出し~」→「~吹き出し~」の間違いです)

1.読込むCSSファイルとCSSの記述例

<link rel="stylesheet" type="text/css" href="tooltipster.css" />

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="jquery.tooltipster.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		 $('.tooltip').tooltipster();
	});
</script>

3.HTMLの記述例

<a href="/" class="tooltip" title="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN">BLINDER HIDDEN</a>

jquery.tooltipster.js:リンクにフキダシ(ツールチップ)を表示するデモ

ソース元:Tooltipster – The jQuery Tooltip Plugin

リンク(a)タグのtitle属性のテキストを表示させるだけっていうのが簡単で良いですね。
(個人的にはプラグイン使わなくても出来そうな気がしますが)