下側に表示するツールチップを作る方法【HTML/CSS・サンプルコード付き】

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

    <!-- タイトル -->
    <div class="bottom-tooltip_title">
      下側に表示するツールチップ
    </div>

    <!-- 説明文 -->
    <p class="bottom-tooltip_text">
      ボタンへマウスカーソルを合わせると、下側にツールチップを表示します。
    </p>

    <!-- ボタンとツールチップ -->
    <div class="bottom-tooltip_item">

      <!-- マウスホバーするボタン -->
      <button
        class="bottom-tooltip_button"
        type="button"
      >
        ヘルプ
      </button>

      <!-- 下側に表示するツールチップ -->
      <div class="bottom-tooltip_box">
        ボタンの下側に補足説明を表示しています。
      </div>

    </div>

  </div>

</body>

</html>

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


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


/* タイトル */
.bottom-tooltip_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}


/* 説明文 */
.bottom-tooltip_text{
  margin:0 0 30px; /* 下側30pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}


/* ボタンとツールチップ */
.bottom-tooltip_item{
  position:relative; /* ツールチップの配置基準 */
  display:inline-block; /* 内容の横幅に合わせる */
}


/* ボタン */
.bottom-tooltip_button{
  padding:14px 30px; /* 上下14px・左右30pxの余白 */
  border:none; /* 枠線を非表示 */
  border-radius:10px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルを指の形にする */
}


/* 下側に表示するツールチップ */
.bottom-tooltip_box{
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 12px); /* ボタンの下側へ12px離して配置 */
  left:50%; /* ボタンの横方向中央を基準にする */
  z-index:10; /* ツールチップを手前に表示 */
  width:240px; /* ツールチップの横幅 */
  max-width:80vw; /* 画面幅を超えにくくする */
  transform:translateX(-50%); /* ツールチップ自身の半分だけ左へ移動して中央揃え */
  padding:12px 16px; /* 上下12px・左右16pxの内側余白 */
  border-radius:8px; /* ツールチップの角丸 */
  background:#111827; /* ツールチップの背景色 */
  color:#ffffff; /* ツールチップの文字色 */
  font-size:14px; /* ツールチップの文字サイズ */
  line-height:1.7; /* ツールチップ内の行間 */
  text-align:left; /* ツールチップ内の文章を左揃え */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では非表示 */
  transition:
    opacity .3s ease,
    visibility .3s ease; /* 0.3秒で表示状態を切り替える */
}


/* ツールチップ上部の三角形 */
.bottom-tooltip_box::before{
  content:""; /* 疑似要素を生成 */
  position:absolute; /* ツールチップを基準に配置 */
  bottom:100%; /* ツールチップの上端へ配置 */
  left:50%; /* 横方向中央を基準にする */
  transform:translateX(-50%); /* 三角形自身の半分だけ左へ移動 */
  border:6px solid transparent; /* 三角形の大きさ。値を大きくすると三角形も大きくなる */
  border-bottom-color:#111827; /* ツールチップと同じ色を指定 */
}


/* マウスホバー時 */
.bottom-tooltip_item:hover .bottom-tooltip_box{
  opacity:1; /* ツールチップを表示 */
  visibility:visible; /* ツールチップを表示状態にする */
}


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

  /* ページ外側の余白 */
  body{
    padding:24px 12px; /* スマートフォンでは外側の余白を小さくする */
  }

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

  /* ツールチップ */
  .bottom-tooltip_box{
    width:220px; /* スマートフォンでは横幅を小さくする */
    max-width:75vw; /* 画面幅に合わせて横幅を制限 */
  }

}