フェードイン・フェードアウトで表示するツールチップの作り方
フェードイン・フェードアウトで表示するツールチップの作り方を紹介します。このサンプルでは、ボタンへマウスカーソルを合わせるとツールチップがゆっくりフェードインし、カーソルを離すとフェードアウトしながら非表示になります。表示・非表示を滑らかに切り替えることで、自然で見やすい補足表示を実装できます。
ツールチップはボタンやアイコンの説明、入力項目の補足、操作方法の案内など、画面を大きく変えずに情報を伝えたい場面でよく利用されます。フェードアニメーションを加えることで表示や非表示が急にならず、ユーザーにとって違和感の少ない操作感になります。
HTMLではツールチップの文章やボタンの文字を変更できます。CSSでは背景色、文字色、位置、角丸、余白、影、フェード時間などを調整でき、用途に合わせたデザインへ変更できます。JavaScriptを使用せずHTMLとCSSだけで実装できるため、初心者でも導入しやすいツールチップのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせると、ツールチップがゆっくりフェード表示されます。
ボタンへマウスカーソルを合わせるとツールチップがゆっくり表示され、カーソルを離すとフェードアウトしながら非表示になります。
コードをコピーして使おう！
<!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="fade-tooltip_wrap">
<!-- タイトル -->
<div class="fade-tooltip_title">
フェードツールチップ
</div>
<!-- 説明文 -->
<p class="fade-tooltip_text">
ボタンへマウスカーソルを合わせると、ツールチップがゆっくりフェード表示されます。
</p>
<!-- ツールチップ -->
<div class="fade-tooltip_area">
<!-- ボタン -->
<button class="fade-tooltip_button" type="button">
マウスを合わせる
</button>
<!-- ツールチップ本体 -->
<div class="fade-tooltip_box">
このツールチップは約1秒かけてフェードイン・フェードアウトします。
</div>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではボタンとツールチップの構造を作成し、CSSでは見た目やフェードイン・フェードアウトのアニメーションを設定します。JavaScriptではマウスを乗せたときと離したときに表示・非表示を切り替える処理を行います。シンプルな構成のため、初心者でも仕組みを理解しながら導入しやすいサンプルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタンの文字、ツールチップ内の文章を変更できます。
style.cssはボタンやツールチップのデザインを設定するファイルです。色、サイズ、余白、角丸、吹き出しの三角、フェードイン・フェードアウトのアニメーション時間などを変更できます。
script.jsはマウスをボタンへ乗せたときにツールチップを表示し、離したときに非表示へ戻す処理を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。HTMLからCSSとJavaScriptを読み込んだ状態で、sample/index.htmlをブラウザで開くと利用できます。ボタンへマウスを乗せるとツールチップがフェードインし、マウスを離すとフェードアウトして閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップへ表示する文章を変更できます。用途に合わせて補足説明や注意書きなど自由な内容へ変更できます。
style.cssではボタンやツールチップの色、文字サイズ、余白、角丸、影、表示位置、吹き出しの三角、フェードイン・フェードアウトの速度を変更できます。
script.jsでは表示・非表示のタイミングを変更したり、表示対象を変更したりできます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると狭くなります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、小さくすると四角に近づきます。
bottom:calc(100% + 16px);
ツールチップとボタンの間隔です。16pxを大きくすると離れ、小さくすると近付きます。
max-width:260px;
ツールチップの最大横幅です。値を変更すると表示できる文章量が変わります。
padding:12px 16px;
ツールチップ内の余白です。値を大きくすると余裕のある表示になります。
border-radius:10px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。
transition: opacity 1s ease, transform 1s ease, visibility 1s ease;
フェードイン・フェードアウトの時間です。1秒かけて切り替わります。値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて縮小表示されます。また、640px以下ではpadding:24px 18px;へ変更することでスマートフォンでも見やすく表示できます。PC・タブレット・スマートフォンで利用できます。
コメント