指定時間後にツールチップを表示する方法
指定時間後にツールチップを表示する方法を紹介します。このサンプルでは、ページを表示してから3秒が経過すると、ボタンの上にツールチップを自動で表示します。マウス操作をきっかけにするのではなく、ページ表示を開始した時点から時間を計測し、指定した時間が経過するとツールチップが表示されます。HTML・CSS・JavaScriptのみで実装し、外部ライブラリは使用しません。
JavaScriptのsetTimeoutを使用してページ表示から3秒間待機し、時間が経過したらツールチップへ表示用のクラスを追加します。ページを開いた直後にはツールチップを表示せず、一定時間が経過してから補足説明や案内を表示したい場合に利用できます。
ボタンの文字やツールチップの説明文はHTMLから変更でき、CSSでは横幅、余白、背景色、文字色、角丸、表示位置などを調整できます。JavaScriptではツールチップを表示するまでの待機時間を変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ表示から3秒後にツールチップを自動で表示します。
ページ表示から3秒後にツールチップが自動で表示されます。「もう一度確認する」を押すと非表示へ戻り、3秒後に再び表示されます。
コードをコピーして使おう！
<!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="delayed-tooltip_wrap">
<!-- タイトル -->
<div class="delayed-tooltip_title">
3秒後に表示するツールチップ
</div>
<!-- 説明文 -->
<p class="delayed-tooltip_text">
ページ表示から3秒後にツールチップを自動で表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="delayed-tooltip_area">
<!-- ボタン -->
<button
class="delayed-tooltip_button"
type="button">
ボタン
</button>
<!-- ツールチップ -->
<div class="delayed-tooltip_message">
ここに説明文を表示します。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではボタンとツールチップの説明文を作成し、CSSではツールチップの位置、背景色、文字色、角丸、三角形、表示・非表示の見た目などを設定します。
JavaScriptでは、ページを表示してから3秒後にツールチップへ表示用のis-visibleクラスを追加します。ページを開いた直後はツールチップを非表示にし、3秒が経過した時点で自動的に表示する仕組みです。
ツールチップの表示はマウスオーバーやクリックをきっかけにするのではなく、ページ表示を開始した時点から時間を計測します。表示までの時間はscript.jsから変更できるため、用途に合わせて1秒後、5秒後などへ調整できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。「3秒後に表示するツールチップ」のタイトル、説明文、ボタンの文字、「ここに説明文を表示します。」というツールチップ内の文章を変更できます。
style.cssはツールチップのデザインを設定するファイルです。全体の最大横幅、余白、背景色、ボタンの色や角丸、ツールチップの表示位置、背景色、文字色、文字サイズ、三角形、表示時の透明度などを変更できます。
script.jsはツールチップを指定時間後に表示するファイルです。ページ表示後にsetTimeout()で3秒待機し、その後ツールチップへis-visibleクラスを追加して表示します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
ページを開いた直後はボタンだけが表示され、ツールチップは非表示になっています。ページ表示から3秒が経過すると、ボタンの上に「ここに説明文を表示します。」というツールチップが自動で表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップ内の説明文を変更できます。ツールチップへ表示したい補足内容に合わせて文章を書き換えられます。
style.cssでは全体の横幅、余白、背景色、ボタンの背景色や文字色、ツールチップの位置、背景色、文字色、角丸、文字サイズなどを変更できます。ツールチップはbottom:calc(100% + 12px);によってボタンの上へ配置されています。
script.jsではsetTimeout()に指定している3000を変更することで、ツールチップを表示するまでの待機時間を変更できます。
数値調整
script.js
3000
ページを表示してからツールチップを表示するまでの待機時間です。3000は3秒を表します。
1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後
例えば5秒後にツールチップを表示したい場合は、script.jsの3000を5000へ変更します。値を大きくすると表示までの待機時間が長くなり、小さくすると早く表示されます。
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を大きくするとツールチップがボタンから上へ離れ、小さくすると近づきます。
padding:10px 16px;
ツールチップの内側余白です。上下の10px、左右の16pxを大きくするとツールチップ内部の余白が広がります。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると説明文が大きく表示されます。
border:6px solid transparent;
ツールチップ下部に表示する三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
transition:opacity .3s ease;
ツールチップが表示されるときの透明度の切り替え時間です。0.3秒で変化します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。
また、画面幅640px以下ではページ全体の余白を24px 12px、ツールチップ全体の余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント