FAQによくあるツールチップ
<div class="fukidashi"><dfn>ピークカット</dfn><span class="tooltip">ピーク時の・・・下げること。</span></div>や
<div class="fukidashi"><dfn>ピークシフト</dfn><span class="tooltip">電力使用の・・・させること。</span></div>は
□□□□□□□□□□□□ですか。
div.fukidashi {
position: relative;
display: inline-block;
padding: .2rem 0;
}
div.fukidashi dfn {
border-bottom: 2px dotted #000;
}
.tooltip {
position: absolute;
bottom: 3.6rem;
left: 0px;
width: 40em;
padding: 6px 10px;
background: #01579b;
color: #FFF;
border-radius: 10px;
transition: 0.5s;
opacity: 0;
}
.tooltip:after {
content: "";
position: absolute;
top: 100%;
left: 16px;
border: 5px solid transparent;
border-top: 14px solid #01579b;
}
.fukidashi:hover .tooltip {
opacity: 1;
}