cssのみのTool Tips

css

概要

CSSのみでのToolTipsの方法を考えます

HTML

コード
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=Shift_jis" />
     <link rel="stylesheet" href="test.css" type="text/css" madia="screan">
 <body>
     <p>CSS Tooltips</p>
     <a href="#" class="tooltips"><font size="-1">Title</font><span>ToolTip</span></a></br>　①
     <p>普通のToolTips</p>
     <a href="#" title="ToolTips"><font size="-1">Title</font></a></br>
 </body>
 </html>
HTML解説

CSS

コード
 a.tooltips font{
 	border-bottom:1px solid blue;
 }
 a:visited.tooltips font{
 	border-bottom:1px solid purple;
 }
 html>body a:active.tooltips font{
 	border-bottom:1px solid red;
 }
 a.tooltips{
 	z-index:10;
 	text-decoration: none;
 	outline:none;
 }
 a:hover.tooltips{
 	position:relative;
 	z-index:10;
 }			
 a.tooltips span{
 	display:none;
 }
 a:hover.tooltips span{
 	display:block;
 	position:absolute;
 	float:left;
 	white-space:nowrap;
 	top:20px;
 	left:20px;
 	background:#fffcd1;
 	border:1px solid #444;
 	color:#444;
 	padding:1px 5px;
 	z-index:100;			
 }
CSS解説
  • a.tooltips
    • z-index:10;
この指定は要素の重なり順をあらわす。数値が大きい方が上に
重なって表示される
    • text-decoration: none;
リンク文字列に下線が表示されないようにする
これを指定しないと、リンク文字列にカーソルを持ってきた時に
表示される"ToolTips"にもリンクの下線が表示されてしまう。よって非表示にする
    • outline:none;
リンク部分を押下した際、点線が表示されないようにする。
普段は気にならないが、今回は<a class="tooltips"><span></a></span>の
範囲は見かけ以上に大きいため気になるので非表示にする。
  • a.tooltips font / a:visited.tooltips font
    • border-bottom:1px solid blue / border-bottom:1px solid purple
a.tooltipsのtext-decoration: noneの指定によりリンク時の下線が非表示
になってしまっているのを補う。ここでは、<font>で指定された部分に
意図的に下線を表示し、リンク時に自動的に表示される下線に見立てる
  • html>body a:active.tooltips font
    • border-bottom:1px solid red
IE以外はリンク文字列を押している間、文字が赤く表示されるので下線も赤くする
html>bodyの指定でIE以外に適用される
  • a:hover.tooltips
    • position:relative
<a class="tooltips"><span>でくくられたToolTipsが表示されるときの位置の基準になる
という指定。
  • a.tooltips span
    • display:none
通常時は非表示にする指定
  • a:hover.tooltips span
    • display:block
マウスオーバー時は表示させる
    • position:absolute
relativeが指定された要素を基準に位置を指定するという記述
    • top:20px / left:20px
位置の指定
    • float:left
要素の左よせ
    • white-space:nowrap
要素内の自動的な折り返しを禁止する
これによりToolTipsが一行で表示する
    • background:#fffcd1;
ToolTipsの背景色
    • border:1px solid #444
ToolTipsのボーダー指定
    • color:#444
ToolTipsの文字色指定
    • padding:1px 5px
ToolTipsのセル内余白指定
    • z-index:100
ToolTipsがマウスオーバーした際は<a class="tooltips>の要素より上に重なって表示するようにする指定。
 <a class="tooltips>のz-indexが10、<a class="tooltips><span>がz-indexが100なので、数値が大きいToolTipsが上に重なって表示される

参考

4 Uber Cool Css Techniques For Links
http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links