CSS3でツールチップの吹き出しを表現する

CSS3でツールチップの吹き出しを表現するサンプル ちょっと気が向いたので、CSSでツールチップの吹き出しっぽいあれを表現してみました。
上記のスクリーンショットを見ていただくとわかるかと思いますが、IE8まではいまいちでした。
IE9はどうなんでしょうかね。
参照:Pure css tooltip box with arrow (T,R,B,L) - Some code from cahnory - Forrst

HTML 下記のようなテキストがあるとします。
普通のHTMLです。

<span class="ui-tooltip">tooltip box</span> CSS CSSをがっつり書いていきます。

.ui-tooltip {
color:#ffffff;
font-size:12px;
font-family:arial;
padding:.5em 1em;
position:relative;
text-align:center;
text-shadow:0 -1px 1px #111111;
↓角丸
-webkit-border-radius:4px ;
-moz-border-radius:4px ;
border-radius:4px ;
↓背景(グラデ含む)
background-color:#3b3b3b;
background-image:-moz-linear-gradient(top,#555555,#222222);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
}

.ui-tooltip:after {
content:"\25B8"; ▼
display:block;
font-size:2em;
height:0;
line-height:0;
position:absolute;
color:#2a2a2a;
bottom:0;
left:1px;
text-align:center;
↓▼を曲げる
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
width:100%;
}

これで下記が完成です。

My tooltip box


:afterに▼をcontentで表示させてぐるっと回しています。
\25B8が'BLACK RIGHT-POINTING SMALL TRIANGLE' です。
Browser Test Page for Unicode Character 'BLACK RIGHT-POINTING SMALL TRIANGLE' (U+25B8)

なお:afterのtransformとpositionを調整することで、上下左右全てに対応可能です。
詳細は参照サイトを御覧ください。
Pure css tooltip box with arrow (T,R,B,L) - Some code from cahnory - Forrst

sponsors

「CSS3でツールチップの吹き出しを表現する」をシェアする

記事作成:
記事URL:

TOP > > > CSS3でツールチップの吹き出しを表現する