【CSS】ツールチップの作り方決定版！吹き出しデザインや画像表示、クリック切替まで徹底解説

マウスカーソルを乗せたときに補足説明を表示する「ツールチップ」。
ユーザーインターフェース（UI）をスッキリさせつつ、必要な情報を伝えるために非常に便利な機能です。

しかし、「HTMLのtitle属性でも出るけれど、デザインが地味で表示も遅い…」と感じている方も多いのではないでしょうか。

実は、CSSを使えばJavaScriptなしでもおしゃれな吹き出し付きツールチップを簡単に実装できます。

さらに、「画像を表示したい」「クリックした時だけ表示したい」といった高度な要望もCSSだけで解決可能です。

この記事では、コピペで使える基本的なコードから、表示位置の自在なコントロール、最前面への表示（z-index）などの応用テクニックまで、現在のWeb制作で役立つ情報を徹底解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

CSSだけで作る基本のツールチップ（data属性活用）
上下左右！表示位置を自在にコントロールする
「画像」をツールチップで表示する方法
クリック（タップ）した時だけ表示させるテクニック
ツールチップが隠れる？最前面（z-index）の注意点
1. 他の要素より手前に表示する
2. 親要素の枠で切り取られる場合
HTML/CSSのスキルを活かして年収を上げる方法

CSSだけで作る基本のツールチップ（data属性活用）

まずは、最もシンプルかつ汎用性の高い実装方法を紹介します。

HTMLの data-tooltip 属性にテキストを設定し、CSSの ::before 擬似要素を使ってそれを表示させるテクニックです。
この方法なら、HTML側が汚れることなくスマートに管理できます。

【ここマウスを乗せてみて！】

<!-- HTML -->
<span class="tooltip-container" data-tooltip="これがツールチップです">
    ここマウスを乗せてみて！
</span>

<!-- CSS -->
<style>
/* ツールチップの親要素 */
.tooltip-container {
    position: relative; /* 基準位置にする */
    cursor: pointer;    /* カーソルを指の形に */
    border-bottom: 1px dotted #333; /* 下線でヒントがあることを示す */
}

/* ツールチップ本体（黒い吹き出し部分） */
.tooltip-container::before {
    content: attr(data-tooltip); /* data属性の中身を表示 */
    position: absolute;
    bottom: 100%;         /* 親要素の上に配置 */
    left: 50%;            /* 左右中央寄せの起点 */
    transform: translateX(-50%); /* 完全に中央へ移動 */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;  /* 改行させない */
    
    /* アニメーション用 */
    opacity: 0;           /* 透明にしておく */
    visibility: hidden;   /* 完全に隠す */
    transition: 0.3s;     /* ふわっと表示 */
    pointer-events: none; /* ツールチップが邪魔にならないように */
}

/* 吹き出しの「しっぽ（三角形）」 */
.tooltip-container::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; /* 透明な枠線を作る */
    border-top-color: #333;        /* 上の辺だけ色をつけて三角に見せる */
    
    /* アニメーション用 */
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

/* ホバー時に表示 */
.tooltip-container:hover::before,
.tooltip-container:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 120%; /* 少し上に浮き上がる演出 */
}
</style>

■コード解説

position: relative;：親要素にこれを指定することで、ツールチップ（absolute）の位置基準をこの要素にします。
content: attr(data-tooltip);：CSSの便利な機能です。HTMLのdata属性に書かれたテキストをそのままCSSのcontentとして利用できます。
transform: translateX(-50%);：left: 50%; だけだと「左端が中央」に来てしまうため、要素の幅の半分だけ左に戻して「ど真ん中」に配置します。
borderを使った三角形：幅0高さ0の要素に太いボーダーをつけ、1辺だけ色をつけると三角形になります。吹き出しデザインの定石テクニックです。

上下左右！表示位置を自在にコントロールする

基本は「上」に表示しましたが、レイアウトによっては「右」や「下」に出したい場合もあります。

その場合は、top / bottom / left / right の値を調整するだけで変更可能です。ここでは、よく使われる「右側に表示」するパターンを紹介します。

<!-- HTML -->
<div class="tooltip-right">
    右に出るよ
    <span class="tooltip-text">補足情報です</span>
</div>

<!-- CSS -->
<style>
.tooltip-right {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    
    /* 位置指定 */
    position: absolute;
    z-index: 1;
    top: 50%;           /* 上から50%の位置 */
    left: 105%;         /* 親要素の右端から少し離す */
    transform: translateY(-50%); /* 上下中央揃え */
    
    opacity: 0;
    transition: opacity 0.3s;
}

/* 吹き出しの矢印（左向き） */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%; /* ツールチップの左側 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent; /* 右辺だけ色付け */
}

.tooltip-right:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
</style>

■コード解説

子要素としての実装：今回は data 属性ではなく、HTML内に span タグでツールチップの中身を書いています。長文やHTMLタグを含めたい場合はこの方法が便利です。
left: 105%;：親要素の幅（100%）より少し右（+5%）に配置することで、被らずに横に表示させています。
border-color：透明（transparent）と色指定を組み合わせることで、矢印の向き（左向き）を作っています。

「画像」をツールチップで表示する方法

商品一覧などで、マウスオーバーで拡大画像を見せたい場合にもツールチップは有効です。

前述の「子要素としてHTMLを書く方法」を使えば、テキストだけでなく <img> タグを入れるだけで簡単に実装できます。

<div class="tooltip-img-wrapper">
    画像を確認
    <div class="tooltip-content">
        <img src="sample.jpg" alt="サンプル画像" width="200">
        <p>詳細なキャプション</p>
    </div>
</div>

<style>
/* 基本的な仕組みはテキスト版と同じ */
.tooltip-img-wrapper {
    position: relative;
    display: inline-block;
}
.tooltip-content {
    display: none; /* 初期状態は非表示 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 220px; /* 画像サイズに合わせて調整 */
    z-index: 9999; /* 最前面へ */
}
.tooltip-img-wrapper:hover .tooltip-content {
    display: block; /* ホバーで表示 */
}
</style>

クリック（タップ）した時だけ表示させるテクニック

スマホユーザーを考慮すると、「ホバー（マウスオーバー）」だけでなく「クリック（タップ）」で表示させたい場面もあります。

JavaScriptを使わずにCSSだけでこれを実現するには、:focus 擬似クラスや tabindex を活用します。

<!-- HTML -->
<!-- tabindex="0" をつけることでフォーカス可能にする -->
<span class="tooltip-click" tabindex="0">
    クリックしてね
    <span class="tip">クリック中だけ表示されます</span>
</span>

<style>
.tooltip-click {
    position: relative;
    cursor: pointer;
    color: blue;
}
.tooltip-click .tip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px;
    transition: 0.2s;
}

/* :focus（フォーカス時）に表示 */
.tooltip-click:focus .tip {
    visibility: visible;
    opacity: 1;
}
</style>

■コード解説