最初から表示されたツールチップを作る方法
最初から表示されたツールチップを作る方法を紹介します。このサンプルでは、ページを開いた時点でツールチップを表示し、「ここをクリックしてください」などの案内を利用者へすぐ伝えられます。通常のホバー表示とは異なり、重要な操作や最初に確認してほしい内容を目立たせたい場面に適しています。
ボタンをクリックするとツールチップは閉じ、「クリックされました」と表示が切り替わります。そのため、初回だけ操作方法を案内したい画面や、初回クリックを促したい機能、お問い合わせ画面や会員サイト、管理画面で最初に利用方法を知らせたい場面などで利用できます。デモでは動作を何度でも確認できるよう再表示ボタンを用意していますが、このボタンはデモ専用であり、配布コードには含まれていません。
HTMLではボタンの文字やツールチップの文章を変更でき、CSSでは背景色、文字色、余白、角丸、位置などを自由に調整できます。JavaScriptではクリック時の表示切り替えを制御しており、用途に合わせて表示するメッセージも変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ツールチップを確認してからボタンをクリックしてください。
ページを開くとツールチップが表示されます。ボタンをクリックするとツールチップが閉じて「クリックされました」と表示されます。「もう一度確認する」を押すと初期状態へ戻ります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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="initial-tooltip_wrap">
<!-- タイトル -->
<div class="initial-tooltip_title">
最初から表示されたツールチップ
</div>
<!-- 説明文 -->
<p class="initial-tooltip_text">
ツールチップを確認してからボタンをクリックしてください。
</p>
<!-- ボタンとツールチップ -->
<div class="initial-tooltip_area">
<!-- 操作ボタン -->
<button
class="initial-tooltip_button"
id="tooltip-button"
type="button">
ボタン
</button>
<!-- 最初から表示するツールチップ -->
<div
class="initial-tooltip_message"
id="tooltip-message">
ここをクリックしてください
</div>
</div>
<!-- クリック後の結果表示 -->
<div
class="initial-tooltip_result"
id="tooltip-result"
aria-live="polite">
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開いた時点でツールチップが表示され、利用者へ操作内容を案内できます。ボタンをクリックするとツールチップが閉じ、「クリックされました」というメッセージを表示するシンプルなサンプルです。初回アクセス時に重要な操作を案内したい場面で利用できます。
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ではクリック後に表示するメッセージや、ツールチップを非表示にする処理を変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:14px 30px;
ボタンの内側余白です。値を大きくするとボタンが大きくなります。
bottom:calc(100% + 12px);
ツールチップとボタンの間隔です。12pxを大きくするとツールチップがさらに上へ離れ、小さくすると近付きます。
padding:10px 16px;
ツールチップの内側余白です。値を大きくすると吹き出しが大きくなります。
border:6px solid transparent;
吹き出し下側の三角形の大きさです。値を大きくすると三角形も大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅へ合わせて表示されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント