ツールチップ（ホバーするとコンテンツ表示）

シンプルなツールチップ。ツールチップの中身は a 要素の title 属性を content: attr(title); で抽出して表示しています。 もっとスマートな書き方がありそうな気もするのですが、とりあえずこれで。

●HTML

<a href=”#” title=”Hello from speech bubble!” class=”tooltip”>CSS Tooltip! Hover me!</a>

●CSS

body {
margin-top: 100px;
text-align: center;
}
a {
font-size:25px;
color: #0bd;
text-decoration: none;
}
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background: #444;
border-radius: 8px;
color: #fff;
content: attr(title);
margin: -82px auto 0;
font-size: 16px;
padding: 13px;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #444 transparent;
border-width: 12px 6px 0 6px;
content: “”;
left: 45%;
bottom: 30px;
position: absolute;
}