マウスホバーで指定時間後に表示するツールチップの作り方
マウスホバーで指定時間後に表示するツールチップの作り方を、HTML・CSS・JavaScriptのサンプルコードを使って紹介します。ボタンへマウスカーソルを合わせてもすぐには表示せず、JavaScriptで指定した時間が経過してからツールチップを表示する仕組みです。
このサンプルでは、ボタンへマウスカーソルを合わせてから1000ミリ秒（1秒）後にツールチップを表示します。1秒が経過する前にマウスカーソルをボタンから外した場合はタイマーを解除するため、ツールチップは表示されません。表示までの時間はJavaScriptの数値を変更するだけで、0.5秒や2秒など用途に合わせて指定できます。
管理画面の操作説明、会員サイトの補足情報、ECサイトの商品オプション、ボタンの説明など、ユーザーが対象へ一定時間マウスホバーした場合だけ補足情報を見せたい場面で利用できます。ツールチップの文章や背景色、文字色、余白、表示位置などはHTMLとCSSから変更でき、表示までの待機時間はJavaScriptから調整できます。画面幅が狭い場合は外側の余白を調整するため、スマートフォン・タブレット・PCの画面幅に合わせて表示できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせると、1秒後にツールチップを表示します。
ボタンへマウスカーソルを合わせ続けると、1秒後にツールチップが表示されます。1秒経過する前にカーソルを外した場合は表示されません。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>指定時間後に表示するツールチップ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ツールチップ全体 -->
<div class="tooltip-hover-delay_wrap">
<!-- タイトル -->
<div class="tooltip-hover-delay_title">
指定時間後に表示するツールチップ
</div>
<!-- 説明文 -->
<p class="tooltip-hover-delay_text">
ボタンへマウスカーソルを合わせると、1秒後にツールチップを表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="tooltip-hover-delay_area">
<!-- マウスホバーするボタン -->
<button
class="tooltip-hover-delay_button"
type="button"
>
ボタン
</button>
<!-- ツールチップ -->
<div class="tooltip-hover-delay_message">
1秒後に表示されました。
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではボタンとツールチップを配置し、CSSでは全体のデザインやツールチップの表示位置、フェード表示を設定します。JavaScriptではマウスカーソルがボタンへ乗ったことを検知し、指定した待機時間が経過してからツールチップを表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタン、ツールチップに表示する文章を変更できます。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。
style.cssはツールチップ全体のデザインを設定するファイルです。全体の横幅や余白、背景色、ボタンの色やサイズ、ツールチップの背景色、文字色、角丸、表示位置、フェード時間などを変更できます。ツールチップは通常時に非表示となり、JavaScriptによってis-visibleクラスが追加されると表示されます。
script.jsはマウスホバーからツールチップを表示するまでの処理を設定するファイルです。ボタンへマウスカーソルを合わせるとタイマーを開始し、指定した待機時間が経過するとツールチップを表示します。待機時間が経過する前にカーソルを外した場合はタイマーを解除し、ツールチップを表示しません。表示後にカーソルを外すとツールチップを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれ、ツールチップを利用できる状態になります。
ページを開いたあとボタンへマウスカーソルを合わせ、そのまま指定時間待つとツールチップが表示されます。表示される前にカーソルをボタンから外した場合は待機処理が解除されるため、ツールチップは表示されません。ツールチップが表示されたあとにカーソルを外すと非表示になります。外部サービスや外部データは使用していないため、APIキーやIDなどを設定する必要はありません。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ボタンに表示する文字、ツールチップに表示する文章を変更できます。管理画面の操作説明、ECサイトの商品情報、会員サイトの補足説明など、利用する場所に合わせて表示内容を変更できます。
style.cssでは、サンプル全体の横幅や余白、背景色、枠線、角丸を変更できます。ボタンについては背景色、文字色、文字サイズ、内側余白、角丸を調整できます。ツールチップについては背景色、文字色、文字サイズ、内側余白、角丸、ボタンからの距離、下側に表示する三角形の大きさ、フェード時間を変更できます。
script.jsでは、マウスカーソルを合わせてからツールチップを表示するまでの待機時間を変更できます。待機時間を長くすると一定時間マウスホバーを続けた場合だけ表示し、短くするとマウスホバー後すぐに近いタイミングで表示できます。
数値調整
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;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
bottom:calc(100% + 12px);
ボタンとツールチップの間隔です。12pxを大きくするとツールチップがボタンから離れ、小さくすると近づきます。
padding:10px 16px;
ツールチップの内側余白です。10pxは上下、16pxは左右の余白です。値を大きくするとツールチップ内の余白が広がります。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
transition:opacity .3s ease;
ツールチップがフェード表示される時間です。.3sは0.3秒です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
border:6px solid transparent;
ツールチップ下側にある三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
script.js
const delayTime = 1000;
マウスカーソルをボタンへ合わせてからツールチップを表示するまでの待機時間です。1000ミリ秒は1秒です。2000に変更すると2秒後、500に変更すると0.5秒後に表示されます。値を大きくすると表示までの待機時間が長くなり、小さくすると短くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではサンプル全体にwidth:100%とmax-width:700pxを指定しているため、画面幅が狭くなると利用できる横幅に合わせて縮小されます。
また、画面幅640px以下ではメディアクエリによって、ページ全体の余白をpadding:24px 12px;、サンプル全体の内側余白をpadding:24px 18px;へ変更します。画面端との余白を抑えながら表示できるため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント