ホバーで表示するポップオーバーを作る方法
ホバーで表示するポップオーバーを作る方法を紹介します。このサンプルでは、対象のボタンへマウスカーソルを重ねるとポップオーバーが表示され、カーソルを外すと自動で非表示になります。クリック操作を必要とせず、JavaScriptでマウスの進入と退出を検知して表示状態を切り替えるシンプルな実装です。
管理画面のヘルプ、商品一覧の補足説明、会員サイトの設定項目、フォーム入力時の案内など、利用者が必要なときだけ情報を確認できる画面に適しています。ボタンの近くへ補足情報を表示するため、現在見ている内容との関係が分かりやすく、ページ内へ長い説明文を常時表示せずに情報を整理できます。
HTMLではタイトル、説明文、ボタン名、ポップオーバー内の文章を変更できます。CSSでは横幅、表示位置、背景色、余白、枠線、角丸、影、アニメーション時間などを調整でき、JavaScriptではホバー時の表示・非表示を制御します。レイアウトは画面幅に合わせて縮小しますが、ホバー操作を使用するため、主にマウスを利用する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="hover-popover_wrap">
<!-- タイトル -->
<div class="hover-popover_title">
ホバーで表示するポップオーバー
</div>
<!-- 説明文 -->
<p class="hover-popover_text">
ボタンへマウスカーソルを重ねると、補足情報が表示されます。
</p>
<!-- ボタンとポップオーバーの配置領域 -->
<div
class="hover-popover_area"
id="hover-popover-area">
<!-- ホバー対象のボタン -->
<button
class="hover-popover_button"
id="hover-popover-button"
type="button"
aria-controls="hover-popover-popup"
aria-expanded="false">
ここにカーソルを重ねる
</button>
<!-- ポップオーバー -->
<div
class="hover-popover_popup"
id="hover-popover-popup"
role="status"
aria-hidden="true">
こちらはホバーで表示するポップオーバーです。ボタンからカーソルを外すと自動で閉じます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* ポップオーバー全体と子要素 */
.hover-popover_wrap,
.hover-popover_wrap *{
box-sizing:border-box; /* paddingとborderを要素の横幅へ含める */
}
/* ポップオーバー全体 */
.hover-popover_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小する */
max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 全体の背景色 */
color:#111827; /* 全体の文字色 */
text-align:center; /* 内容を中央揃えにする */
}
/* タイトル */
.hover-popover_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 説明文 */
.hover-popover_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* ボタンとポップオーバーの配置領域 */
.hover-popover_area{
position:relative; /* ポップオーバーの配置基準にする */
display:inline-block; /* 内容の横幅に合わせて表示する */
}
/* ホバー対象のボタン */
.hover-popover_button{
padding:14px 28px; /* 上下14px・左右28px。値を大きくするとボタンが大きくなる */
border:0; /* 枠線を削除する */
border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font:inherit; /* ページ全体と同じフォントを使用する */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタンの文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスポインターを指の形にする */
transition:background-color .3s ease; /* 0.3秒で背景色を切り替える */
}
/* ボタンへマウスカーソルを重ねたとき */
.hover-popover_button:hover{
background:#1d4ed8; /* ホバー時の背景色 */
}
/* ボタンをキーボード操作したとき */
.hover-popover_button:focus-visible{
outline:3px solid rgba(37,99,235,.25); /* フォーカス枠の太さ */
outline-offset:3px; /* ボタンとフォーカス枠の間隔 */
}
/* ポップオーバー */
.hover-popover_popup{
position:absolute; /* ボタンを基準に配置する */
top:calc(100% + 16px); /* ボタンの下から16px離して表示する */
left:50%; /* 配置領域の中央を基準にする */
z-index:10; /* 周囲の要素より前面へ表示する */
width:300px; /* ポップオーバーの横幅。値を大きくすると横に広がる */
max-width:calc(100vw - 40px); /* 画面幅より大きくならないようにする */
padding:18px; /* 内側余白。値を大きくすると文章と枠線の間隔が広がる */
border:1px solid #dbe4f0; /* ポップオーバーを囲む枠線 */
border-radius:12px; /* 角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* ポップオーバーの背景色 */
box-shadow:0 12px 30px rgba(15,23,42,.12); /* ポップオーバーの影 */
color:#374151; /* 本文の文字色 */
font-size:16px; /* 本文の文字サイズ */
line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
text-align:left; /* 本文を左揃えにする */
opacity:0; /* 初期状態では透明にする */
visibility:hidden; /* 初期状態では非表示にする */
pointer-events:none; /* 非表示時はマウス操作を受け付けない */
transform:translate(-50%,-8px); /* 中央配置し、初期状態では8px上へ移動する */
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s ease;
/*
0.3秒で表示・非表示を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* ポップオーバー上部の三角形 */
.hover-popover_popup::before{
content:""; /* 疑似要素を表示する */
position:absolute; /* ポップオーバーを基準に配置する */
top:-8px; /* 上側へ8pxはみ出して配置する */
left:50%; /* 中央を基準にする */
width:16px; /* 三角形の元になる四角形の横幅 */
height:16px; /* 三角形の元になる四角形の高さ */
border-top:1px solid #dbe4f0; /* 上側の枠線 */
border-left:1px solid #dbe4f0; /* 左側の枠線 */
background:#ffffff; /* 三角形の背景色 */
transform:translateX(-50%) rotate(45deg); /* 中央へ配置して45度回転する */
}
/* ポップオーバー表示時 */
.hover-popover_popup.is-open{
opacity:1; /* 不透明にして表示する */
visibility:visible; /* 表示状態へ変更する */
pointer-events:auto; /* 表示中はマウス操作を受け付ける */
transform:translate(-50%,0); /* 元の位置へ移動する */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* ポップオーバー全体 */
.hover-popover_wrap{
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
/* ボタンとポップオーバーの配置領域 */
.hover-popover_area{
width:100%; /* スマートフォンでは横幅いっぱいにする */
}
/* ホバー対象のボタン */
.hover-popover_button{
width:100%; /* スマートフォンでは横幅いっぱいに表示する */
}
/* ポップオーバー */
.hover-popover_popup{
width:100%; /* スマートフォンでは配置領域の横幅に合わせる */
}
}
// ボタンとポップオーバーの配置領域を取得
const hoverPopoverArea =
document.getElementById("hover-popover-area");
// ホバー対象のボタンを取得
const hoverPopoverButton =
document.getElementById("hover-popover-button");
// ポップオーバーを取得
const hoverPopoverPopup =
document.getElementById("hover-popover-popup");
// ポップオーバーを表示する処理
function openHoverPopover(){
// 表示用クラスを追加
hoverPopoverPopup.classList.add("is-open");
// ボタンの展開状態を表示中へ変更
hoverPopoverButton.setAttribute(
"aria-expanded",
"true"
);
// ポップオーバーの状態を表示中へ変更
hoverPopoverPopup.setAttribute(
"aria-hidden",
"false"
);
}
// ポップオーバーを非表示にする処理
function closeHoverPopover(){
// 表示用クラスを削除
hoverPopoverPopup.classList.remove("is-open");
// ボタンの展開状態を閉じた状態へ変更
hoverPopoverButton.setAttribute(
"aria-expanded",
"false"
);
// ポップオーバーの状態を非表示へ変更
hoverPopoverPopup.setAttribute(
"aria-hidden",
"true"
);
}
// 配置領域へマウスカーソルが入ったとき
hoverPopoverArea.addEventListener(
"mouseenter",
openHoverPopover
);
// 配置領域からマウスカーソルが外れたとき
hoverPopoverArea.addEventListener(
"mouseleave",
closeHoverPopover
);
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではホバー対象のボタンとポップオーバーを配置し、CSSではポップオーバーのデザインや表示位置を設定します。JavaScriptではマウスカーソルがボタンへ重なったタイミングでポップオーバーを表示し、カーソルが外れると自動で閉じる処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。タイトル、説明文、ボタンの文字、ポップオーバー内の文章を変更できます。ボタンとポップオーバーは同じ配置領域へまとめて配置しているため、ボタンの近くへ補足情報を表示できます。
style.cssはポップオーバー全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、ボタンの色、角丸、影、表示位置、アニメーションなどを変更できます。
script.jsはマウスカーソルの移動を監視するファイルです。カーソルがボタンへ重なるとポップオーバーを表示し、配置領域から離れると自動で非表示へ切り替えます。また、アクセシビリティ向けの属性も表示状態に合わせて更新します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたボタンへマウスカーソルを重ねるとポップオーバーが表示され、カーソルを外すと自動で閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、ポップオーバーへ表示する補足情報を変更できます。商品の説明、入力補足、設定画面のヘルプなど、用途に合わせて自由に編集できます。
style.cssでは全体の横幅、ボタンの色、背景色、余白、ポップオーバーの表示位置、文字サイズ、角丸、影、アニメーション時間を変更できます。ポップオーバーの横幅や上下の間隔を調整することで、画面に合わせたレイアウトへ変更できます。
script.jsではホバー時の表示・非表示の処理を変更できます。表示状態はis-openクラスで管理しているため、表示方法を変更したい場合は対応するCSSも合わせて編集してください。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
padding:14px 28px;
ボタンの内側余白です。上下の14pxを変更すると高さが変わり、左右の28pxを変更すると横幅が変わります。
top:calc(100% + 16px);
ボタンとポップオーバーの上下間隔です。16pxを大きくすると離れ、小さくすると近付きます。
width:300px;
ポップオーバーの横幅です。値を大きくすると文章を広く表示でき、小さくするとコンパクトになります。
padding:18px;
ポップオーバー内の余白です。値を大きくすると文章と枠線の間隔が広がります。
border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transform:translate(-50%,-8px);
非表示時の位置です。-8pxを変更すると表示開始位置が上下へ移動します。
transition:0.3s;
ポップオーバーが表示・非表示へ切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。また、ポップオーバーにはmax-width:calc(100vw - 40px)を設定しているため、小さい画面でも表示がはみ出しにくい構成です。640px以下ではボタンとポップオーバーを横幅いっぱいに表示するため、スマートフォン・タブレット・PCで利用できます。
コメント