CSSだけで吹き出しツールチップを表示する

CSS

.tooltip{
display:inline-block;
position:relative;
text-decoration:none;
color:#fff;
text-align:center;
width:16px;
height:16px;
background:#dc0000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}           
.tooltip:hover {
cursor: help;
}           
span.arrow_box {
display:none;
padding:7px 5px;
width:200px;
background:#000;
color:#fff;
z-index:10;
}
.tooltip:hover span.arrow_box{
display:inline;
position:absolute;
top:25px;
left:-100px;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-bottom-color: #000;
border-width: 7px;
margin-left: -7px; }

HTML

新規無料登録
<span class="tooltip">？<span class="arrow_box">ツールチップに詳細な内容を表示する。</span></span>

以下を参考にしました。

ふわっと下から浮き出るツールチップ (1/3)
Easy CSS Tooltip
css arrow please!