クリックで表示するツールチップを作る方法
クリックで表示するツールチップを作る方法を、HTML・CSS・JavaScriptのサンプルコードを使って紹介します。このサンプルでは、「ヘルプ」ボタンをクリックするとボタンの上にツールチップが表示され、もう一度クリックすると非表示になります。マウスホバーではなくクリック操作で表示を切り替えるため、利用者が必要なタイミングで補足情報を確認できます。
HTMLではボタンとツールチップの文章を配置し、CSSではツールチップの位置、横幅、背景色、文字色、余白、角丸などを設定します。JavaScriptではボタンのクリックを検知し、ツールチップへis-activeクラスを付け外しすることで表示と非表示を切り替えます。表示状態の切り替えにはフェードを付けているため、ツールチップが自然に現れるデザインになっています。
管理画面のヘルプ、会員サイトの操作説明、ECサイトの商品情報、フォーム入力時の補足など、クリックした利用者にだけ追加情報を見せたい場面で利用できます。ツールチップの文章やボタンの文字は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="click-tooltip_wrap">
<!-- タイトル -->
<div class="click-tooltip_title">
クリックで表示するツールチップ
</div>
<!-- 説明文 -->
<p class="click-tooltip_text">
ボタンをクリックすると、ツールチップの表示と非表示を切り替えます。
</p>
<!-- ボタンとツールチップ -->
<div class="click-tooltip_item">
<!-- クリックするボタン -->
<button
class="click-tooltip_button"
id="click-tooltip-button"
type="button"
>
ヘルプ
</button>
<!-- ツールチップ -->
<div
class="click-tooltip_box"
id="click-tooltip-box"
>
このボタンに関する補足説明を表示しています。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「ヘルプ」ボタンとツールチップの文章を配置し、CSSでボタンやツールチップのデザインと表示状態を設定します。JavaScriptではボタンのクリックを検知し、is-activeクラスを付け外しすることでツールチップの表示と非表示を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、「ヘルプ」ボタンの文字、ツールチップ内に表示する補足説明を変更できます。
style.cssはツールチップとボタンのデザインを設定するファイルです。全体の横幅や余白、ボタンの背景色、ツールチップの横幅、背景色、文字色、表示位置、角丸、フェード時間などを変更できます。
script.jsはクリック操作による表示切り替えを行うファイルです。「ヘルプ」ボタンをクリックするたびにツールチップのis-activeクラスを付け外しし、表示と非表示を切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルを配置したあとsample/index.htmlをブラウザで開いてください。「ヘルプ」ボタンをクリックするとツールチップが表示され、もう一度クリックすると非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップ内の補足説明を変更できます。style.cssでは全体やボタンの背景色、文字色、横幅、余白、角丸、ツールチップの表示位置、横幅、フェード時間などを変更できます。ツールチップをボタンから離したい場合はbottom、横幅を変更したい場合はwidthを調整します。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
padding:14px 30px;
ボタンの内側余白です。14pxは上下、30pxは左右の余白を表し、値を大きくするとボタンが大きくなります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなります。
bottom:calc(100% + 12px);
ボタンとツールチップの間隔です。12pxを大きくするとボタンから離れ、小さくすると近づきます。
width:240px;
ツールチップの横幅です。値を大きくすると横に広がり、小さくすると文章が折り返されやすくなります。
padding:12px 16px;
ツールチップの内側余白です。12pxは上下、16pxは左右の余白を表します。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなります。
line-height:1.7;
ツールチップ内の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まります。
transition:opacity .3s ease, visibility .3s ease;
ツールチップを表示・非表示にするときの切り替え時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
border:6px solid transparent;
ツールチップ下部に付ける三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、全体が画面幅に合わせて縮小されます。ツールチップにはmax-width:80vwを設定し、画面幅を大きく超えないようにしています。また、640px以下ではページの余白をpadding:24px 12px;、全体の内側余白をpadding:24px 18px;へ変更し、ツールチップの横幅を220px、最大横幅を75vwへ調整するため、スマートフォン・タブレット・PCで利用できます。
コメント