FAQによくあるツールチップ

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;
	}

TOP