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

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.

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

HTML

CSS