css tooltip

cssでツールチップ表示

• 表示時間制限の回避 → 長文ツールチップでも安心して読める
• 表示内容制限の緩和 → 通常のHTML同様リンクや画像等利用できる
  (ただし<div/>タグで囲む必要がある. ⇒ 画像ツールチップの例
  
  )
• はてなダイアリー謎仕様の回避 → 改行時の先頭インデントを無視できるようになる

【使用方法】

1. http記法や <a/>タグ＋titleオプション の代わりに、
   通常の<a/>タグの内側に<span/>タグでツールチップ表示内容を囲んで記述
   例: 記述コード:

   <a href="url">リンク文字列<span>ツールチップ表示内容</span></a>
   

   表示結果:    リンク文字列ツールチップ表示内容
   
2. スタイルシートに下記記述を追加
   出典：参考URL
   注：デザインは適宜カスタマイズしてください

   a{
   	z-index:  10;
   }
   a:hover{
   	position: relative; 
   	z-index:  100;
   } 
   a span{
   	display:  none;
   }
   a:hover span{
   	display:  block;
   	position: absolute;
   	float:    left;
   	white-space: nowrap;
   	top:      -2.2em;
   	left:     0.5em;
   	background: #fffcd1;
   	border:   1px solid #444;
   	color:    #444;
   	padding:  1px 5px;
   	z-index:  10;
   }
   

■参考URL:

[CSS]ツールチップや画像拡大など実用的な4つのチュートリアル | コリス:
http://coliss.com/articles/build-websites/operation/css/1040.html

■サンプル:

http://cssglobe.com/articles/link_tech/01.html