簡単。CSS、HTMLのツールチップ（マウスホバーで吹き出しが出てくる）を実装

マウスホバーで吹き出しが出てくるツールチップを簡単に設置できるCSSを紹介します。

上にツールチップを表示

◆ HTML

ここをマウスオーバーでツールチップテキストがでる

◆ CSS

.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	background: linear-gradient(transparent 60%, #F3F84B 60%);
}
.tooltip .tooltip-text {
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 0;
	visibility: hidden;
	width: auto;
	white-space: nowrap;
	padding: 0.5em;
	transition: opacity 1s;
	text-align: center;
	opacity: 0;
	color: #ffffff;
	border-radius: 6px;
	background-color: #339999;
}
.tooltip .tooltip-text::after {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	content: ' ';
	border-top: 10px solid #339999;
	border-bottom: 0px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}

◆ 実際の挙動

右にツールチップを表示

HTMLは上に表示する場合も右の場合も、もちろん左や下でも同じです。変わるのはCSSのみ。

◆ HTML

ここをマウスオーバーでツールチップテキストがでる

◆ CSS

.tooltip-r {
	position: relative;
	display: inline-block;
	cursor: pointer;
	background: linear-gradient(transparent 60%, #F3F84B 60%);
}
.tooltip-r .tooltip-text {
	position: absolute;
	z-index: 1;
	bottom: 0%;
	left: 110%;
	visibility: hidden;
	width: auto;
	white-space: nowrap;
	padding: 0.5em;
	transition: opacity 1s;
	text-align: center;
	opacity: 0;
	color: #ffffff;
	border-radius: 6px;
	background-color: #339999;
}
.tooltip-r .tooltip-text::after {
	position: absolute;
	top: 50%;
	left: -10px;
	margin-top: -5px;
	content: '';
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 0px solid transparent;
	border-right: 10px solid #339999;
}
.tooltip-r:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}

◆ 実際の挙動