ぼうびろく

http://www.atmarkit.co.jp/ait/articles/1309/24/news053.html



基本

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}



<a href="#" class="tooltip">Tooltipだよ<span>吹き出しで出るテキスト</span></a>

a.tooltip:hover span{
display:inline;
position:absolute;
/*border:1px solid #dc0000;	吹き出しの枠線色を削除*/
background:#dc0000;         /*吹き出しの背景色の変更*/
color:#fff;                 /*吹き出しの文字色の変更*/
bottom:25px;                /*位置指定追加。クエスチョンマークの下端から、吹き出しの下端を25px上げる*/
left:-100px;                /*位置指定追加。吹き出しの幅の半分を左に移動させる*/
}



a{
position:relative;	/*吹き出しの表示位置指定の基準とするため追加*/
}



/*吹き出しの足*/
a.tooltip:hover span:after {
content: "";
display: block;
width:0;
height:0;
border-top:8px solid #dc0000;
border-left:8px solid transparent;
border-right:8px solid transparent;
position: absolute;
left: 100px;
bottom:-8px;
}

tabelのcssをレスポンシブに対応させる

table内の文章がはみ出る。