FAQ・Q&A向けツールチップの作り方
FAQ・Q&A向けツールチップの作り方を紹介します。このサンプルでは、よくある質問を一覧で表示し、各質問の「？」にマウスを重ねると対応する回答をツールチップで表示します。クリックまたはタップでも回答を表示できるため、マウス操作だけでなくスマートフォンなどのタッチ操作でも内容を確認できます。
施設案内の営業時間や利用料金、予約方法など、短い回答をその場で確認してもらいたいFAQに利用できます。回答を常に表示しておく必要がないため、質問を一覧で見せながら必要な情報だけを確認できる構成にできます。施設サイトの案内ページ、サービスサイト、会員サイト、ECサイトの利用案内など、限られたスペースへQ&Aを配置したい場合にも利用しやすい形式です。
HTMLでは質問文と回答文を変更でき、CSSでは質問部分やツールチップの背景色、文字色、枠線、角丸、余白、影などを調整できます。JavaScriptでは質問をクリックまたはタップしたときの表示状態を切り替えます。画面幅640px以下では余白や文字サイズを調整するレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
確認したい質問の「？」にマウスを重ねるか、タップしてください。
各質問の「？」にマウスを重ねると回答が表示され、クリックまたはタップでも回答を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>FAQ・Q&A向けツールチップ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- FAQ全体 -->
<div class="faq-tooltip_wrap">
<!-- タイトル -->
<div class="faq-tooltip_title">
施設についてよくある質問
</div>
<!-- 説明文 -->
<p class="faq-tooltip_text">
確認したい質問の「？」にマウスを重ねるか、タップしてください。
</p>
<!-- 質問一覧 -->
<div class="faq-tooltip_list">
<!-- 営業時間 -->
<div class="faq-tooltip_item">
<button
class="faq-tooltip_question"
type="button"
aria-expanded="false">
営業時間を教えてください
<span class="faq-tooltip_icon">?</span>
</button>
<div class="faq-tooltip_answer">
<strong>A.</strong>
営業時間は午前9時から午後6時までです。
</div>
</div>
<!-- 利用料金 -->
<div class="faq-tooltip_item">
<button
class="faq-tooltip_question"
type="button"
aria-expanded="false">
利用料金はいくらですか？
<span class="faq-tooltip_icon">?</span>
</button>
<div class="faq-tooltip_answer">
<strong>A.</strong>
一般料金は1,000円です。利用内容によって料金が異なる場合があります。
</div>
</div>
<!-- 予約 -->
<div class="faq-tooltip_item">
<button
class="faq-tooltip_question"
type="button"
aria-expanded="false">
予約は必要ですか？
<span class="faq-tooltip_icon">?</span>
</button>
<div class="faq-tooltip_answer">
<strong>A.</strong>
事前予約が必要です。ご利用前に予約を行ってください。
</div>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「施設についてよくある質問」のタイトル、説明文、質問と回答を配置し、CSSではFAQ全体や質問ボタン、「？」アイコン、回答ツールチップのデザインを設定します。JavaScriptでは質問をクリックまたはタップしたときに、対応する回答ツールチップの表示・非表示を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはFAQ・Q&A全体を構成するファイルです。「施設についてよくある質問」のタイトル、操作方法を案内する説明文、営業時間・利用料金・予約についての質問と、それぞれに対応する回答を記述しています。質問や回答を書き換えたり、同じ構成の項目を追加・削除したりすることで、掲載するQ&Aの内容や件数を変更できます。
style.cssはFAQ全体とツールチップの見た目を設定するファイルです。FAQ全体の横幅や余白、背景色、枠線、角丸のほか、質問ボタン、「？」アイコン、回答ツールチップの色、サイズ、影、表示位置などを変更できます。マウスを重ねた場合やフォーカスした場合のツールチップ表示もCSSで設定しています。
script.jsは質問をクリックまたはタップしたときの動作を設定するファイルです。選択した質問へis-openクラスを付けて回答を表示し、すでに別の回答が表示されている場合は閉じます。同じ質問をもう一度クリックすると回答を閉じることができます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。質問へマウスを重ねると回答がツールチップとして表示されます。「？」を含む質問ボタンをクリックまたはタップした場合も回答を表示できます。別の質問をクリックすると、現在表示されている回答を閉じて選択した質問の回答へ切り替わります。
カスタマイズできる内容
index.htmlではFAQのタイトル、説明文、質問文、回答文を変更できます。現在は営業時間、利用料金、予約についての3項目を掲載していますが、faq-tooltip_itemと同じ構成を追加・削除することで質問数を変更できます。回答内の「A.」の表記もHTMLから変更できます。
style.cssではFAQ全体の最大横幅、余白、背景色、枠線、角丸を変更できます。質問ボタンについても高さ、余白、文字サイズ、背景色、枠線、角丸を調整できます。「？」アイコンは横幅・高さ・背景色・文字色を変更でき、回答ツールチップは横幅、表示位置、余白、背景色、文字色、角丸、影、表示アニメーションの時間を調整できます。
数値調整
style.css
max-width:700px;
FAQ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
FAQ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
FAQ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
FAQ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると質問一覧との間隔が広がります。
gap:14px;
質問同士の間隔です。値を大きくすると各質問の間隔が広がり、小さくすると狭くなります。
min-height:60px;
質問ボタンの最小高さです。値を大きくすると質問部分が高くなります。
padding:16px 18px;
質問ボタンの内側余白です。上下の16pxと左右の18pxを変更すると、質問文と枠線の間隔が変わります。
width:28px;・height:28px;
「？」アイコンの大きさです。同じ値を変更することで円形を維持したままサイズを調整できます。
bottom:calc(100% + 10px);
回答ツールチップと質問の間隔です。10pxを大きくすると質問から離れ、小さくすると近づきます。
width:calc(100% - 24px);
回答ツールチップの横幅です。24pxを変更すると質問ボタンに対するツールチップの横幅を調整できます。
padding:16px 18px;
回答ツールチップの内側余白です。値を大きくすると回答文と枠線の間隔が広がります。
border-radius:12px;
回答ツールチップの角丸です。値を大きくすると丸みが強くなります。
transform:translateX(-50%) translateY(6px);
非表示状態のツールチップを下方向へ6pxずらしています。6pxを変更すると表示時に移動する距離が変わります。
transition:0.2s;
回答ツールチップが表示・非表示へ切り替わる時間です。0.2秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてFAQ全体が縮小されます。さらに640px以下ではFAQ全体をpadding:24px 18px;、質問ボタンをpadding:14px;へ変更し、質問文の文字サイズも15pxへ調整しています。回答ツールチップもwidth:calc(100% - 12px);へ変更されるため、スマートフォン・タブレット・PCで利用できます。
コメント