マウスホバーで指定時間だけ表示するツールチップの作り方
マウスホバーで指定時間だけ表示するツールチップの作り方を、HTML・CSS・JavaScriptのサンプルコードを使って紹介します。ボタンへマウスカーソルを合わせるとツールチップがすぐに表示され、JavaScriptで指定した時間が経過すると、マウスカーソルをボタンへ乗せたままでも非表示になる仕組みです。
通常のマウスホバー型ツールチップでは、対象へカーソルを合わせている間は表示を続けますが、このサンプルではツールチップを表示しておく時間をJavaScriptから設定できます。表示時間を3000ミリ秒に設定すると3秒間表示したあとに非表示になります。もう一度表示したい場合は、マウスカーソルを一度ボタンから外して再び合わせることで、再度3秒間表示できます。
管理画面の操作説明、会員サイトの補足情報、ECサイトの商品オプションやボタンの説明など、補足情報を一定時間だけ見せたい場面で利用できます。ツールチップの文章や背景色、文字色、余白、表示位置などはHTMLとCSSから変更でき、表示しておく時間はJavaScriptの数値を変更して用途に合わせて調整できます。画面幅が狭い場合には外側の余白を調整するため、スマートフォン・タブレット・PCの画面幅に合わせて表示できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせると、ツールチップを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="tooltip-hover-timed_wrap">
<!-- タイトル -->
<div class="tooltip-hover-timed_title">
指定時間だけ表示するツールチップ
</div>
<!-- 説明文 -->
<p class="tooltip-hover-timed_text">
ボタンへマウスカーソルを合わせると、ツールチップを3秒間表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="tooltip-hover-timed_area">
<!-- マウスホバーするボタン -->
<button
class="tooltip-hover-timed_button"
type="button"
>
ボタン
</button>
<!-- 表示するツールチップ -->
<div class="tooltip-hover-timed_message">
3秒後に自動で非表示になります。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでボタンとツールチップを配置し、CSSでツールチップの位置や色、フェード表示などのデザインを設定します。JavaScriptではマウスホバーを検知し、ツールチップを表示してから指定した時間が経過すると自動で非表示にします。
サンプルでは表示時間を3000ミリ秒（3秒）に設定しています。ボタンへマウスカーソルを合わせるとツールチップが表示され、3秒後に自動で非表示になります。マウスカーソルを途中で外した場合もツールチップを非表示にし、実行中のタイマーを解除します。
外部ライブラリや外部サービスは使用していません。表示時間はscript.jsにあるdisplayTimeの数値を変更できるため、1秒、5秒など用途に合わせてツールチップを表示しておく時間を指定できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、マウスホバーするボタン、ボタンの上側へ表示するツールチップを記述しています。ボタンの文字や「3秒後に自動で非表示になります。」というツールチップ内の文章を変更できます。
style.cssはツールチップのデザインを設定するファイルです。全体の横幅や余白、ボタンの色や角丸、ツールチップの背景色・文字色・表示位置・フェード時間などを変更できます。.is-visibleが付いたときにopacityとvisibilityを切り替え、ツールチップを表示します。
script.jsはマウスホバーと自動非表示を制御するファイルです。mouseenterでツールチップを表示し、setTimeout()を使って指定時間後に.is-visibleを削除します。mouseleaveではタイマーを解除してツールチップを非表示にします。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを保存します。3つのファイルは同じ階層へ配置してください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。
ファイルを配置したらsample/index.htmlをブラウザで開きます。ボタンへマウスカーソルを合わせると、ボタンの上側にツールチップが表示されます。初期設定では3秒後に自動で非表示になります。もう一度表示する場合は、一度ボタンからマウスカーソルを外してから再び合わせます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ボタンの文字、ツールチップ内の文章を変更できます。実際のWebサイトへ組み込む場合は、用途に合わせてツールチップへ表示する説明文を編集します。
style.cssでは、ツールチップ全体の最大横幅や余白、ボタンの背景色・文字色・サイズ・角丸、ツールチップの背景色・文字色・余白・角丸・表示位置などを変更できます。ツールチップ下部の三角形は::afterで作成しており、borderの値から大きさを調整できます。
script.jsでは、const displayTime = 3000;を変更することで、ツールチップを表示しておく時間を指定できます。時間はミリ秒で設定するため、表示したい秒数に合わせて数値を変更します。
数値調整
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;
ツールチップがフェード表示・非表示するときの時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
border:6px solid transparent;
ツールチップ下部にある三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
script.js
const displayTime = 3000;
ツールチップを表示しておく時間です。3000は3000ミリ秒、つまり3秒を表します。5000に変更すると5秒、1000に変更すると1秒表示されます。値を大きくすると表示時間が長くなり、小さくすると短くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;によって、ツールチップ全体が利用できる画面幅に合わせて縮小されます。
画面幅が640px以下になると、ページ全体の余白を24px 12px、ツールチップ全体の内側余白を24px 18pxへ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて表示できます。
コメント