ツールチップを表示する
リンクのマウスオン時に、ちょっとしたアクセントになるツールチップ。
そのツールチップをCSSだけでを表示することができます。
マウスをのせると、ツールチップが表示。ツールチップが表示されます。
<p class="chip"><a href="#">マウスをのせると、<span>ツールチップが表示。</span></a>ツールチップが表示されます。</p>
.chip a {
position:relative;
display:inline-block;
}
.chip a span {
display:none;
}
.chip a:hover {
zoom:100%; /*IE7以下対策 */
text-decoration:none;
}
.chip a:hover span {
position:absolute;
display:block;
width:140px;
padding:3px;
top:-30px;
left:10px;
background-color:#EEE;
border:solid 1px #CCC;
}
a要素に対してdisplay:inline-block;を指定すると、
ブロック要素のように幅や高さを指定しつつ、インライン要素のように改行されずに表示ができます。
ツールチップさせたい文字、画像などをspanタグで囲み、通常時はdisplay:none;にて非表示にします。
