CSSだけでシンプルなツールチップを出現させるTips。
リンクテキストの直後に、表示させたいテキストをspanで囲むだけ。
Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem マウスオーバーでツールチップPure Css Tooltip magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
HTML
＜a href="#"＞ツールチップ＜span＞Pure Css Tooltip＜/span＞＜/a＞
CSS
.demo a:hover{
position:relative;
z-index:100;
}
.demo a span{
display:none;
}
.demo a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#000;
border:1px solid #444;
color:#fff;
padding:1px 5px;
z-index:10;
}
Try it!
