リンクタグの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属性のテキストを表示させるだけっていうのが簡単で良いですね。