ツールチップを表示する
リンクのマウスオン時に、ちょっとしたアクセントになるツールチップ。
そのツールチップを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;にて非表示にします。