画像付きツールチップを作る方法【HTML/CSS・サンプルコード付き】

画像付きツールチップを作る方法

画像付きツールチップを作る方法を紹介します。このサンプルでは、ボタンにマウスを重ねると対応する画像がツールチップとして表示されるUIをHTMLとCSSだけで作成します。通常はボタンだけを表示し、必要なときだけ画像を確認できるため、ページ内のスペースを大きく使わずに補足情報を表示できます。

商品一覧で商品の参考画像を表示したい場合や、施設・観光地の写真を補足したい場合、管理画面で項目に関連する画像を確認したい場合などに利用できます。3つのボタンにはそれぞれ異なる画像を設定し、マウスオーバーするとボタンの上側へ画像を表示します。また、キーボード操作でボタンへフォーカスした場合にも画像を確認できます。

HTMLではボタンの文字、表示する画像、代替テキストを変更できます。CSSではツールチップの横幅、余白、角丸、影、画像サイズ、表示位置、フェード時間などを調整できます。画面幅640px以下ではツールチップとボタンのサイズを小さくするレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

各ボタンにマウスを重ねると、対応する画像がボタンの上に表示されます。

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

<!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="image-tooltip_wrap">

    <!-- タイトル -->
    <div class="image-tooltip_title">
      画像付きツールチップ
    </div>

    <!-- 説明文 -->
    <p class="image-tooltip_text">
      ボタンにマウスを重ねると画像を表示します。
    </p>

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

      <!-- ツールチップ1 -->
      <div class="image-tooltip_item">

        <!-- 表示対象 -->
        <button class="image-tooltip_trigger" type="button">
          画像1
        </button>

        <!-- ツールチップ -->
        <div class="image-tooltip_content">

          <img
            class="image-tooltip_image"
            src="images/image1.png"
            alt="画像1">

        </div>

      </div>

      <!-- ツールチップ2 -->
      <div class="image-tooltip_item">

        <!-- 表示対象 -->
        <button class="image-tooltip_trigger" type="button">
          画像2
        </button>

        <!-- ツールチップ -->
        <div class="image-tooltip_content">

          <img
            class="image-tooltip_image"
            src="images/image2.png"
            alt="画像2">

        </div>

      </div>

      <!-- ツールチップ3 -->
      <div class="image-tooltip_item">

        <!-- 表示対象 -->
        <button class="image-tooltip_trigger" type="button">
          画像3
        </button>

        <!-- ツールチップ -->
        <div class="image-tooltip_content">

          <img
            class="image-tooltip_image"
            src="images/image3.png"
            alt="画像3">

        </div>

      </div>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 画像付きツールチップ全体と内部要素 */
.image-tooltip_wrap,
.image-tooltip_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 画像付きツールチップ全体 */
.image-tooltip_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
}

/* タイトル */
.image-tooltip_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 説明文 */
.image-tooltip_text{
  margin:0 0 32px; /* 下側32pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* ツールチップ一覧 */
.image-tooltip_list{
  display:flex; /* 項目を横並びにする */
  justify-content:center; /* 左右中央へ配置 */
  gap:20px; /* 項目同士の間隔。値を大きくすると広がる */
  flex-wrap:wrap; /* 横幅が足りない場合は折り返す */
  padding-top:180px; /* ツールチップを上側へ表示するためのスペース */
}

/* ツールチップ1項目 */
.image-tooltip_item{
  position:relative; /* ツールチップ配置の基準 */
  display:inline-block; /* 内容に合わせた横幅で表示 */
}

/* 表示対象 */
.image-tooltip_trigger{
  display:inline-flex; /* 文字を中央配置する */
  align-items:center; /* 縦中央 */
  justify-content:center; /* 横中央 */
  min-width:150px; /* 最小横幅。値を大きくするとボタンが横に広がる */
  min-height:52px; /* 最小高さ。値を大きくするとボタンが高くなる */
  padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
  border:1px solid #d1d5db; /* 枠線 */
  border-radius:10px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 背景色 */
  color:#111827; /* 文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 文字を太字にする */
  cursor:default; /* クリック操作ではなくマウスオーバーで表示する */
}

/* ツールチップ */
.image-tooltip_content{
  position:absolute; /* 表示対象の上へ配置 */
  z-index:10; /* 他の要素より前面へ表示 */
  left:50%; /* 横中央へ配置 */
  bottom:calc(100% + 12px); /* 表示対象の上へ12px離して配置 */
  width:220px; /* ツールチップの横幅。値を大きくすると画像が大きくなる */
  padding:8px; /* 内側余白 */
  border-radius:10px; /* ツールチップの角丸 */
  background:#ffffff; /* 背景色 */
  box-shadow:0 8px 24px rgba(15,23,42,.18); /* ツールチップの影 */
  transform:translateX(-50%) translateY(6px); /* 中央位置と非表示時の位置を調整 */
  visibility:hidden; /* 通常時は非表示 */
  opacity:0; /* 通常時は透明 */
  pointer-events:none; /* ツールチップ自体はマウス操作を受け付けない */
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;
  /*
    0.3秒でツールチップを表示・非表示にする。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* ツールチップ下部の三角形 */
.image-tooltip_content::after{
  content:""; /* 三角形を表示 */
  position:absolute; /* ツールチップ下部へ配置 */
  top:100%; /* ツールチップの下端へ配置 */
  left:50%; /* 横中央へ配置 */
  transform:translateX(-50%); /* 中央位置を調整 */
  border:8px solid transparent; /* 三角形の大きさ */
  border-top-color:#ffffff; /* 上側だけ色を付けて下向き三角形にする */
}

/* ツールチップ画像 */
.image-tooltip_image{
  display:block; /* 画像下の不要な隙間を防ぐ */
  width:100%; /* ツールチップの横幅いっぱいに表示 */
  aspect-ratio:4/3; /* 横4・縦3の比率で表示 */
  object-fit:cover; /* 表示領域を埋めるように画像を切り抜く */
  border-radius:7px; /* 画像の角丸 */
}

/* マウスオーバー・フォーカス時 */
.image-tooltip_item:hover .image-tooltip_content,
.image-tooltip_item:focus-within .image-tooltip_content{
  visibility:visible; /* ツールチップを表示 */
  opacity:1; /* 不透明にする */
  transform:translateX(-50%) translateY(0); /* 表示位置へ移動 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* 画像付きツールチップ全体 */
  .image-tooltip_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* ツールチップ一覧 */
  .image-tooltip_list{
    gap:16px; /* スマートフォンでは項目同士の間隔を小さくする */
    padding-top:150px; /* スマートフォンでは上側のスペースを小さくする */
  }

  /* 表示対象 */
  .image-tooltip_trigger{
    min-width:130px; /* スマートフォンではボタン幅を小さくする */
  }

  /* ツールチップ */
  .image-tooltip_content{
    width:180px; /* スマートフォンではツールチップを小さくする */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルと、ツールチップ内へ表示する3枚の画像で構成されています。HTMLでは3つの表示対象と、それぞれに対応する画像付きツールチップを配置します。CSSでは通常時にツールチップを非表示にし、表示対象へマウスを重ねたとき、またはフォーカスしたときに対応する画像を上側へ表示します。JavaScriptは使用しません。

sample/
├── index.html
├── style.css
└── images/
    ├── image1.png
    ├── image2.png
    └── image3.png

各ファイルの役割
index.htmlは画像付きツールチップ全体を構成するファイルです。「画像1」「画像2」「画像3」の表示対象と、それぞれに対応する画像を配置します。表示対象の文字、画像ファイル名、画像の代替テキストを変更できます。

style.cssはツールチップの表示位置や見た目を設定するファイルです。表示対象のサイズ、ツールチップの横幅、余白、角丸、影、画像の表示比率、表示位置、フェード時間などを変更できます。:hoverと:focus-withinを利用して、マウスオーバー時またはフォーカス時にツールチップを表示します。

imagesフォルダにはツールチップ内へ表示する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngの3枚を使用します。画像ファイル自体は利用者側で用意してください。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にimagesフォルダを作成してください。imagesフォルダにはimage1.png、image2.png、image3.pngを配置します。画像ファイル名を変更する場合は、index.html内の各srcも実際のファイル名に合わせて変更してください。

配置後にsample/index.htmlをブラウザで開きます。「画像1」「画像2」「画像3」の表示対象へマウスを重ねると、それぞれに対応する画像が上側へツールチップとして表示されます。マウスを外すと非表示になります。また、キーボード操作で表示対象へフォーカスした場合にも画像を確認できます。

カスタマイズできる内容
index.htmlでは表示対象に書かれている「画像1」「画像2」「画像3」の文字、各画像のsrc、altを変更できます。使用する画像を差し替える場合はimagesフォルダへ画像を配置し、HTMLのファイル名を一致させてください。

style.cssでは、全体の最大横幅、表示対象同士の間隔、表示対象のサイズや角丸、ツールチップの横幅、画像の表示比率、ツールチップと表示対象の間隔、影、角丸、フェード時間などを変更できます。

数値調整
style.css
max-width:700px;
画像付きツールチップ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
全体を囲む枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

margin:0 0 32px;
説明文の下側余白です。32pxを大きくすると表示対象との間隔が広がります。

gap:20px;
表示対象同士の間隔です。値を大きくすると離れ、小さくすると近くなります。

padding-top:180px;
ツールチップを表示するために一覧上側へ確保しているスペースです。値を大きくすると上側の余白が広がります。

min-width:150px;
表示対象の最小横幅です。値を大きくすると横に広くなります。

min-height:52px;
表示対象の最小高さです。値を大きくすると高くなります。

padding:12px 20px;
表示対象の内側余白です。上下の12px、左右の20pxを変更すると表示対象の大きさを調整できます。

bottom:calc(100% + 12px);
ツールチップと表示対象の間隔です。12pxを大きくするとツールチップが上へ離れ、小さくすると近づきます。

width:220px;
ツールチップの横幅です。値を大きくすると内部の画像も大きく表示され、小さくするとコンパクトになります。

padding:8px;
ツールチップ内側の余白です。値を大きくすると画像と外側の間隔が広がります。

border-radius:10px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。

translateY(6px)
非表示時のツールチップの縦位置です。表示時には0へ移動するため、値を大きくすると表示開始位置が下側になります。

transition:0.3s;
ツールチップの透明度と位置が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く表示されます。

border:8px solid transparent;
ツールチップ下部に表示する三角形の大きさです。8pxを大きくすると三角形が大きくなります。

aspect-ratio:4/3;
ツールチップ内の画像を横4・縦3の比率で表示します。

border-radius:7px;
ツールチップ内に表示する画像の角丸です。値を大きくすると画像の丸みが強くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体が縮小されます。また、表示対象一覧にはflex-wrap:wrap;を指定しているため、横幅が足りない場合は自動的に折り返します。640px以下では全体の内側余白を24px 18px、表示対象の最小横幅を130px、ツールチップの横幅を180pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。