0

CSSのみでできるツールチップ

IE7がでてますます肩身の狭くなるポップアップですが、今は代替としてCSS+JavaScriptで疑似ポップアップのようにしてだすのが主流になってきそうです。

今回試したPure CSS Tooltipsは、それよりも少しライト感覚でCSSだけでポップアップをだします。
ただ、当たり前でがCSSのみなのでマウスオーバーしてる時しかでてきません。
手軽に使いたい時に効果を発揮しそうです。

■CSS

.ItemHeaderClient{
/*border-bottom:1px solid #717171;*/
padding:10px 8px;
line-height:1.5;
}
.ItemClient{
/* \*/clear:right;/* */
border:1px solid #8C9698;
margin:0 11px 9px 0;
background:#fff;
}a.blueClient{
color:#06c;
font-size:20px;
font-weight:bold;
}span.line{
_float:left;
margin-right:20px;
white-space: nowrap;
}

■XHTML
<a class=info href="#" mce_href="#">
これをマウスオーバー
<span>ここに説明文を書いておく</span>
</a>

たったこれだけツールチップが実現できます。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です