基本のツールチップを作る方法
基本のツールチップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、ボタンへマウスカーソルを合わせると説明文を表示するシンプルなツールチップを作成します。JavaScriptを使用しないため、手軽に導入できる基本的な実装方法として利用できます。
ツールチップは、アイコンやボタンの補足説明を表示したい場面でよく利用されます。管理画面の操作ボタン、フォーム入力のヒント、設定画面の説明、ECサイトの商品操作ボタンなど、画面を見やすく保ちながら必要な情報だけを表示できるため、使いやすいUIを作成できます。ボタンからマウスを離すとツールチップは自動で非表示になります。
ボタンの文字、ツールチップの文章はHTMLから変更でき、CSSでは文字サイズ、背景色、文字色、余白、角丸、表示位置などを用途に合わせて調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、初心者でも導入しやすい基本的なツールチップのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせるとツールチップを表示します。
ボタンへマウスカーソルを合わせるとツールチップが表示されます。カーソルを外すと自動で非表示になります。
コードをコピーして使おう！
<!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="basic-tooltip_wrap">
<!-- タイトル -->
<div class="basic-tooltip_title">
基本のツールチップ
</div>
<!-- 説明文 -->
<p class="basic-tooltip_text">
ボタンへマウスカーソルを合わせるとツールチップを表示します。
</p>
<!-- ボタンとツールチップをまとめるエリア -->
<div class="basic-tooltip_area">
<!-- ツールチップを表示する対象ボタン -->
<button class="basic-tooltip_button" type="button">
ボタン
</button>
<!-- ボタンへホバーしたときに表示する説明文 -->
<div class="basic-tooltip_message">
ここに説明文を表示します。
</div>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではツールチップを表示するボタンと説明文を配置し、CSSではツールチップの表示位置やデザイン、ホバー時の表示・非表示を設定します。JavaScriptを使用せず、ボタンへマウスカーソルを合わせるだけで説明を表示できる基本的なツールチップを作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタンの文字、ツールチップへ表示する説明文を変更できます。
style.cssはツールチップ全体のデザインを設定するファイルです。ボタンの色やサイズ、文字色、ツールチップの背景色、表示位置、角丸、余白、表示アニメーションなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたボタンへマウスカーソルを合わせるとツールチップが表示され、カーソルを外すと自動で非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップへ表示する説明文を変更できます。ボタン名や説明文を用途に合わせて自由に編集できます。
style.cssではボタンの背景色、文字色、横幅、余白、角丸、ツールチップの背景色、文字サイズ、表示位置、吹き出しの三角形、表示アニメーションなどを変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文とボタンの間隔です。値を大きくすると広がり、小さくすると近づきます。
padding:14px 30px;
ボタンの内側余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
bottom:calc(100% + 12px);
ツールチップとボタンの間隔です。12pxを大きくすると離れ、小さくすると近づきます。
padding:10px 16px;
ツールチップの内側余白です。値を大きくすると説明文の周囲に余裕ができます。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。
font-size:14px;
ツールチップの文字サイズです。値を大きくすると文字が読みやすくなり、小さくするとコンパクトになります。
border:6px solid transparent;
ツールチップ下部の三角形の大きさです。6pxを変更すると矢印のサイズが変わります。
transition:0.3s;
ツールチップの表示・非表示にかかる時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて縮小表示されます。また、640px以下ではpadding:24px 18px;へ変更し、ツールチップにはmax-width:220px;とwhite-space:normal;を指定しているため、スマートフォン・タブレット・PCで利用できます。
コメント