吹き出し型ツールチップを作る方法【HTML/CSS・サンプルコード付き】

ツールチップ

吹き出し型ツールチップを作る方法

吹き出し型ツールチップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使い、吹き出しの矢印付きツールチップを実装します。上・下・左・右の4方向に表示する方法をまとめて確認できます。

吹き出し型ツールチップは、ボタンやアイコンの補足説明を分かりやすく表示したい場面でよく使われます。矢印が付くことで、どの要素に対する説明なのか直感的に伝えられます。

このサンプルでは、マウスを乗せるとツールチップが表示されます。表示位置は上・下・左・右から選択でき、表示する文章や背景色、文字色、余白などはCSSで自由に変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

吹き出し型ツールチップ

上・下・左・右の4方向に表示できる吹き出し型ツールチップです。

上 上向きの吹き出しです。
下 下向きの吹き出しです。
左 左向きの吹き出しです。
右 右向きの吹き出しです。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>吹き出し型ツールチップ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ツールチップ全体 -->
  <div class="bubble-tooltip_wrap">

    <!-- 見出し -->
    <div class="bubble-tooltip_title">
      吹き出し型ツールチップ
    </div>

    <!-- 説明文 -->
    <p class="bubble-tooltip_text">
      上・下・左・右の4方向に表示できる吹き出し型ツールチップです。
    </p>

    <!-- ツールチップ一覧 -->
    <div class="bubble-tooltip_grid">

      <div class="bubble-tooltip_item">
        上
        <span class="bubble-tooltip_box bubble-tooltip_top">上側に表示される吹き出しです。</span>
      </div>

      <div class="bubble-tooltip_item">
        下
        <span class="bubble-tooltip_box bubble-tooltip_bottom">下側に表示される吹き出しです。</span>
      </div>

      <div class="bubble-tooltip_item">
        左
        <span class="bubble-tooltip_box bubble-tooltip_left">左側に表示される吹き出しです。</span>
      </div>

      <div class="bubble-tooltip_item">
        右
        <span class="bubble-tooltip_box bubble-tooltip_right">右側に表示される吹き出しです。</span>
      </div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。index.html にツールチップの構造を記述し、style.css で吹き出し本体や矢印のデザインを設定しています。JavaScriptを使用せず、上・下・左・右の4方向に表示できる吹き出し型ツールチップを実装できます。 

sample/
├── index.html
└── style.css

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。表示する文章は index.html、色や余白、文字サイズなどのデザインは style.css で変更できます。また、style.css の border-width: 8px; を変更すると吹き出しの矢印サイズを調整できます。例えば 12px にすると大きな矢印になり、5px にすると小さな矢印になります。さらに、calc(100% + 12px) の 12px を変更すると、吹き出しと対象要素との間隔を調整できます。

コメント