なるWeb 
どうも7noteです。?マークにカーソルを当てると、補足説明が出るやつ作ります。
こういうやつ、作ります。
最初はdisplay: none;で非表示にしておき、hover時に表示するような作りにします。
作り方
1) ハテナ(?)を用意。
index.html
<div class="box">
<div class="ques">?</div>
</div>簡単に装飾を入れます。
style.css
.ques {
background: #EEE; /* 背景色に灰色を指定 */
width: 1.5em; /* 横幅を1.5文字分にする */
line-height: 1.5em; /* 文字が上下中央にくるように工夫 */
text-align: center; /* 文字が左右中央にくるように工夫 */
border-radius: 50%; /* 円形に変更 */
}
2) 補足説明のバルーンポップアップを作る。（動きはまだ。）
index.html
<div class="box">
<div class="ques">?</div>
<!-- 以下の1行を追加。 -->
<div class="ex">ここに補足説明文を入れる</div>
</div>style.css
position: relative; /* 表示位置の基準値とする */
}
.ex {
position: absolute; /* boxを基準にする */
top: 0; /* 自由に調整 */
left: 30px; /* 自由に調整 */
color: #fff; /* 文字色を白にする */
font-size: 14px;
background: rgba(0,0,0,0.5); /* 黒バックを半透明にするため、rgbaで指定 */
padding: 2px 5px; /* 余白を少々 */
}3) hover時の動きを入れる。
style.css
.ques:hover {
cursor: pointer; /* カーソルを指の形にする。 */
}
.ex {
display: none; /* 最初は非表示にする。 */
}
.ques:hover + .ex {
display: block; /* quesの上にカーソルが乗っている時だけ表示 */
}+α)ふわっと出したい場合は、以下のように変更。
style.css
.ex {
display: none;
/*↓に変更*/
opacity: 0;
transition : all .3s;
}
.ques:hover + .ex {
display: block;
/*↓に変更*/
opacity: 1;
}完成！
まとめ
結構簡単に作れます。
表示位置だけtopとleftでpx指定しているので、実際に運用レベルで使うには表示位置の指定方法は少し変えたほうがよいかも。
ハテナ（?）の位置がかわらなければ今回の方法で十分対応可能。
