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

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

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

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>PDFをツールチップに表示する方法</title>

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

</head>
<body>

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

    <!-- タイトル -->
    <div class="pdf-tooltip_title">
      PDFをツールチップで表示
    </div>

    <!-- 説明文 -->
    <p class="pdf-tooltip_text">
      ボタンへマウスカーソルを合わせるとPDFを表示します。
    </p>

    <!-- ツールチップ表示エリア -->
    <div class="pdf-tooltip_area">

      <!-- PDFを表示するボタン -->
      <button class="pdf-tooltip_button" type="button">
        PDFを確認
      </button>

      <!-- PDFを表示するツールチップ -->
      <div class="pdf-tooltip_message">

        <!-- PDF表示エリア -->
        <div class="pdf-tooltip_frame">

          <!--
            【表示するPDFの設定方法】

            1. sampleフォルダ内にpdfフォルダを作成してください。

            2. 表示したいPDFをsample/pdf/へ配置してください。

            3. サンプルではsample.pdfというファイル名を使用します。

            4. PDFのファイル名を変更する場合は、
               下記のsrcも同じファイル名へ変更してください。
          -->
          <iframe
            src="pdf/sample.pdf"
            title="PDF sample">
          </iframe>

        </div>

      </div>

    </div>

  </div>

</body>
</html>

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

/* PDFツールチップ内のすべての要素 */
.pdf-tooltip_wrap,
.pdf-tooltip_wrap *{
  box-sizing:border-box; /* paddingとborderを要素のサイズへ含める */
}

/* PDFツールチップ全体 */
.pdf-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; /* 内容を中央揃えにする */
}

/* タイトル */
.pdf-tooltip_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.pdf-tooltip_text{
  margin:0 0 30px; /* 下側30pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ツールチップ表示エリア */
.pdf-tooltip_area{
  position:relative; /* ツールチップの配置基準にする */
  display:inline-block; /* ボタンの横幅に合わせる */
}

/* PDFを表示するボタン */
.pdf-tooltip_button{
  margin:0; /* ブラウザ標準の余白を削除 */
  padding:14px 30px; /* 上下14px・左右30px。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* PDFを表示するツールチップ */
.pdf-tooltip_message{
  position:absolute; /* ボタンを基準に配置 */
  z-index:10; /* 周囲の要素より前面へ表示 */
  left:50%; /* ボタンの中央を基準にする */
  bottom:calc(100% + 14px); /* ボタンの14px上へ配置。値を大きくすると間隔が広がる */
  width:520px; /* ツールチップの横幅。値を大きくすると横に広がる */
  max-width:calc(100vw - 48px); /* 画面端から左右24px分の余白を確保 */
  padding:14px; /* 内側の余白。値を大きくするとPDFとの間隔が広がる */
  border-radius:12px; /* ツールチップの角丸。値を大きくすると丸みが強くなる */
  background:#111827; /* ツールチップの背景色 */
  opacity:0; /* 通常時は透明 */
  visibility:hidden; /* 通常時は非表示 */
  transform:translateX(-50%); /* 横方向の中央へ配置 */
  transition:
    opacity .3s ease,
    visibility .3s ease;
  /*
    0.3秒で表示状態を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* ツールチップ下部の三角形 */
.pdf-tooltip_message::after{
  content:""; /* 三角形を作成 */
  position:absolute; /* ツールチップを基準に配置 */
  top:100%; /* ツールチップの下側へ配置 */
  left:50%; /* 横方向の中央へ配置 */
  transform:translateX(-50%); /* 三角形自身の横幅分を調整 */
  border:7px solid transparent; /* 三角形の大きさ。値を大きくすると大きくなる */
  border-top-color:#111827; /* 下向き三角形の色 */
}

/* マウスカーソルを合わせたとき */
.pdf-tooltip_area:hover .pdf-tooltip_message{
  opacity:1; /* ツールチップを表示 */
  visibility:visible; /* ツールチップを表示状態にする */
}

/* PDF表示エリア */
.pdf-tooltip_frame{
  width:100%; /* ツールチップの横幅いっぱいに表示 */
  height:360px; /* PDFの高さ。値を大きくすると表示領域が高くなる */
}

/* PDF */
.pdf-tooltip_frame iframe{
  display:block; /* iframe下部の余計な隙間をなくす */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  height:100%; /* 親要素の高さいっぱいに表示 */
  max-width:none; /* テーマなどの最大横幅指定を解除 */
  margin:0; /* 外側余白を削除 */
  border:none; /* iframeの枠線を非表示 */
  border-radius:8px; /* PDF表示部分の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* PDF表示部分の背景色 */
}

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

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

  /* PDFを表示するツールチップ */
  .pdf-tooltip_message{
    width:calc(100vw - 64px); /* 画面幅に合わせてツールチップを縮小 */
  }

  /* PDF表示エリア */
  .pdf-tooltip_frame{
    height:300px; /* スマートフォンではPDFの高さを300pxにする */
  }

}