HTMLとCSSで表現するツールチップ

HTMLとCSSだけでツールチップ（マウスオンしたら出てくる注釈みたいなやつ）を作ります。

#HTML

HTML

<span class="c-tooltip" data-tooltip="ツールチップの内容">マウスホバーでツールチップを表示</span>

今回はspanタグで囲っているけど何でも良い。文字だけじゃなくてアイコン画像などでも良い。
data-tooltipというカスタムデータ属性を作成、その中にツールチップに表示したい内容を入力してくださいね。

data-* - HTML: HyperText Markup Language | MDN

#CSS

ポイントは::after要素にHTMLで設定したカスタムデータ属性のをattr(data-tooltip)で呼び出すこと。
これ便利だなー

CSS

/* マウスオンする要素とツールチップを横並びにする */
.c-tooltip {
	display: inline-block;
	position: relative;
}

/* ツールチップ共通の設定 */
.c-tooltip::before,
.c-tooltip::after {
	-webkit-transition: all 0.2s;
	opacity: 0;
	position: absolute;
	transition: all 0.2s;
	visibility: hidden;
	z-index: 11;
}

/* ツールチップ吹き出しのひげ */
.c-tooltip::before {
	-webkit-transform: translateY(-50%);
	border-color: transparent #5f6368 transparent transparent;
	border-style: solid;
	border-width: 3px 7px 3px 0;
	content: "";
	height: 0;
	left: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	width: 0;
}

/* ツールチップ吹き出しの本体 */
.c-tooltip::after {
	-webkit-transform: translateY(-50%);
	background: #5f6368;
	border-radius: 3px;
	color: #fff;
	content: attr(data-tooltip); /* ここでdata-tooltipの内容を呼び出しているよ */
	display: block;
	font-size: 11px;
	font-weight: 600;
	left: calc(100% + 13px);
	padding: 5px 10px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

/* マウスオンしたときのカーソルの設定 */
.c-tooltip:hover {
	cursor: pointer;
}

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

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

以上です。完成データはこちらです。

See the Pen simple Tooltip by nagomi-753 (@nagomi-753) on CodePen.