「？」アイコンにマウスホバーして注釈を表示するツールチップの作り方
「？」アイコンにマウスホバーして注釈を表示するツールチップの作り方を紹介します。このサンプルでは、文章の横に丸い「？」アイコンを配置し、マウスカーソルを合わせるとアイコンの上側に補足説明を表示します。JavaScriptを使用せず、HTMLとCSSだけでツールチップの表示・非表示を切り替えます。
入力フォームの項目説明、料金やサービス内容の補足、設定画面の機能説明など、通常は表示しておく必要がない注釈を必要なときだけ確認できるようにしたい場合に利用できます。説明文を常に表示する場合と比べて画面をすっきりまとめやすく、「？」アイコンによって補足情報があることも分かりやすく示せます。
HTMLでは「？」アイコンの横に表示する項目名とツールチップ内の注釈を変更できます。CSSではアイコンの大きさ、枠線、文字色、ツールチップの背景色、文字色、余白、角丸、表示位置などを調整できます。画面幅が狭い場合にはツールチップの横幅が画面内へ収まりやすいように調整しているため、スマートフォン・タブレット・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="tooltip-help-icon_wrap">
<!-- タイトル -->
<div class="tooltip-help-icon_title">
「？」アイコンで補足説明
</div>
<!-- 説明文 -->
<p class="tooltip-help-icon_text">
「？」アイコンにマウスカーソルを合わせると注釈を表示します。
</p>
<!-- 注釈を表示する項目 -->
<div class="tooltip-help-icon_item">
<!-- 項目名 -->
<span class="tooltip-help-icon_label">
送料について
</span>
<!-- ツールチップ表示エリア -->
<div class="tooltip-help-icon_area">
<!-- 「？」アイコン -->
<button
class="tooltip-help-icon_button"
type="button"
aria-label="送料についての補足説明">
?
</button>
<!-- 注釈 -->
<div class="tooltip-help-icon_message">
5,000円以上のご注文で送料が無料になります。
</div>
</div>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは項目名の横に丸い「？」アイコンと注釈を配置し、CSSではアイコンのデザイン、ツールチップの表示位置、背景色、余白、矢印、表示・非表示の切り替えを設定します。JavaScriptは使用せず、「？」アイコンへマウスカーソルを合わせるとCSSの:hoverによって注釈が表示されます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。「送料について」の項目名、「？」アイコン、ツールチップ内に表示する「5,000円以上のご注文で送料が無料になります。」の注釈を変更できます。
style.cssはツールチップのデザインと表示動作を設定するファイルです。「？」アイコンの大きさ、枠線、背景色、文字色、ツールチップの横幅、余白、角丸、背景色、文字サイズ、アイコンとの間隔、矢印などを変更できます。また、:hoverを利用してマウスホバー時にツールチップを表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「送料について」の横に表示される丸い「？」アイコンへマウスカーソルを合わせると、アイコンの上側に注釈が表示されます。マウスカーソルを「？」アイコンから外すと、注釈は再び非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、「送料について」の項目名、ツールチップ内の注釈、aria-labelの内容を変更できます。料金の補足、入力項目の説明、設定内容の案内など、表示したい用途に合わせて文章を変更できます。
style.cssでは全体の横幅や余白、「？」アイコンのサイズ、枠線、背景色、文字色、ツールチップの横幅、背景色、文字色、余白、角丸、文字サイズ、表示位置、矢印の大きさ、表示・非表示が切り替わる時間を変更できます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 32px;
説明文の下側余白です。32pxを大きくすると「送料について」との間隔が広がり、小さくすると狭くなります。
gap:8px;
項目名と「？」アイコンの間隔です。値を大きくすると離れ、小さくすると近くなります。
width:34px; / height:34px;
「？」アイコンの大きさです。2つの値を同じ大きさで変更すると、円形を保ったままアイコンを拡大・縮小できます。
font-size:20px;
「？」の文字サイズです。値を大きくすると「？」が大きくなり、小さくすると小さくなります。
bottom:calc(100% + 12px);
「？」アイコンとツールチップの間隔です。12pxを大きくするとツールチップがアイコンから上へ離れ、小さくすると近づきます。
max-width:260px;
ツールチップの最大横幅です。値を大きくすると横に広く表示でき、小さくすると文章が折り返されやすくなります。
padding:10px 16px;
ツールチップの内側余白です。上下の10pxを大きくすると縦方向の余白が広がり、左右の16pxを大きくすると文章と端の間隔が広がります。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.6;
ツールチップ内の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
border:6px solid transparent;
ツールチップ下側にある矢印の大きさです。6pxを大きくすると矢印が大きくなり、小さくすると小さくなります。
opacity .3s ease
ツールチップが表示・非表示へ切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体の横幅が縮小されます。画面幅640px以下では全体の余白をpadding:24px 18px;へ変更し、ツールチップをwidth:220px;、max-width:70vw;にすることで画面幅に合わせて横幅を調整します。スマートフォン・タブレット・PCで利用できる構成です。
コメント