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

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

1.読込むCSSファイル

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

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

<script type="text/javascript" src="https://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技術メディア">DAD UNION</a>

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

ソース元:Tooltipster – The jQuery Tooltip Plugin

リンク(a)タグのtitle属性のテキストを表示させるだけっていうのが簡単で良いですね。