記事内のテキストにマウスを乗せて説明窓を表示させる

今回は、実装も簡単で面白い小技を紹介したいと思います。リンクにつかうアンカーテキスト（<a>です）にマウスを乗せると、説明窓（ツールチップ）がでる便利でちょっと格好良いTipsです。サンプルは以下の通りです。

●リンクなしバージョン
TRASHWindows/Macのオススメソフト・Tips紹介ブログ

<a class="tooltip">TRASH<span>Windows/Macのオススメソフト・Tips紹介ブログ</span></a>

●リンクありバージョン
TRASHWindows/Macのオススメソフト・Tips紹介ブログ

<a href="http://blackcat13numbers.blog31.fc2.com/" class="tooltip">TRASH<span>Windows/Macのオススメソフト・Tips紹介ブログ</span></a>

CSS編集では、以下を記述してください。

a.tooltip span {
       display:none; 
       padding:5px 5px; 
       margin-left:8px; 
       width:200px; 
}
a.tooltip:hover span {
       z-index:10; 
       display:inline; 
       position:absolute; 
       border:1px solid #ccc;
       background:#fff;
       color:#6c6c6c;
}

勿論、CSS内の数値やカラーなどを変更することで、ツールチップのカスタマイズも可能です。アンカーテキスト以外だと、<p>でも使えるみたいで、この小技を勉強させていただいたサイトで詳細な説明が掲載されています。

FYI：以下サイトでも詳細を紹介しているので是非
Movable Type 備忘録｜Movable Type 4.1 用テンプレート

大変勉強になりました。感謝です。