左側に表示するツールチップを作る方法
左側に表示するツールチップを作る方法を、HTMLとCSSのサンプルコードを使って紹介します。このサンプルでは、ボタンへマウスカーソルを合わせると、ボタンの左側に補足説明を表示します。対象となる要素の横に情報を配置したい場合に使いやすい、シンプルなツールチップです。
HTMLではボタンとツールチップの文章を配置し、CSSではボタンを基準としてツールチップを左側へ配置します。表示と非表示の切り替えには:hoverを使用するため、JavaScriptは必要ありません。ツールチップの右側にはCSSで三角形を付け、どのボタンに対する補足説明なのか分かりやすい吹き出し型のデザインにしています。
ボタンの操作説明、フォームの入力補助、アイコンの補足、機能の簡単な説明など、対象要素の左側へ追加情報を表示したい場面で利用できます。ツールチップの文章、横幅、背景色、文字色、余白、角丸、ボタンとの間隔、フェード時間などは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="left-tooltip_wrap">
<!-- タイトル -->
<div class="left-tooltip_title">
左側に表示するツールチップ
</div>
<!-- 説明文 -->
<p class="left-tooltip_text">
ボタンへマウスカーソルを合わせると、左側にツールチップを表示します。
</p>
<!-- ボタンとツールチップ -->
<div class="left-tooltip_item">
<!-- マウスホバーするボタン -->
<button
class="left-tooltip_button"
type="button"
>
ヘルプ
</button>
<!-- 左側に表示するツールチップ -->
<div class="left-tooltip_box">
ボタンの左側に補足説明を表示しています。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではボタンとツールチップの文章を配置し、CSSではボタンを基準としてツールチップを左側へ配置します。マウスホバーによる表示と非表示もCSSで設定しているため、JavaScriptを使用せずに実装できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、「ヘルプ」ボタン、ツールチップ内に表示する補足説明を記述しています。
style.cssはボタンとツールチップのデザインや表示位置を設定するファイルです。ツールチップをボタンの左側へ配置し、マウスホバーしたときの表示と非表示、吹き出し部分の三角形、フェードなどを設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。index.htmlからstyle.cssを読み込む構成になっているため、2ファイルを配置したあとsample/index.htmlをブラウザで開いてください。「ヘルプ」ボタンへマウスカーソルを合わせると、ボタンの左側にツールチップが表示されます。マウスカーソルを外すとツールチップは非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップ内の補足説明を変更できます。style.cssでは全体やボタンの背景色、文字色、余白、角丸、ツールチップの横幅、背景色、文字サイズ、ボタンとの間隔、三角形の大きさ、フェード時間などを変更できます。ツールチップをボタンからさらに離したい場合はright、ツールチップの横幅を変更したい場合はwidthを調整します。
数値調整
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;
ボタンの角丸です。値を大きくするとボタンの丸みが強くなります。
top:50%;
ボタンの縦方向中央を基準としてツールチップを配置する設定です。transform:translateY(-50%)と組み合わせることで、ボタンとツールチップの中央位置を揃えています。
right:calc(100% + 12px);
ボタンの左端を基準に、ツールチップを左側へ配置する設定です。12pxがボタンとツールチップの間隔になり、値を大きくするとツールチップがさらに左へ離れます。
width:240px;
ツールチップの横幅です。値を大きくすると横に広がり、小さくすると文章が折り返されやすくなります。
padding:12px 16px;
ツールチップの内側余白です。12pxは上下、16pxは左右の余白を表します。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなります。
line-height:1.7;
ツールチップ内の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まります。
transition:opacity .3s ease, visibility .3s ease;
ツールチップの表示と非表示を切り替える時間です。0.3秒より大きくするとゆっくり、小さくすると速く切り替わります。
border:6px solid transparent;
ツールチップ右側に付ける三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。全体にはwidth:100%とmax-width:700pxを設定し、画面幅に合わせて縮小できるようにしています。ツールチップにはmax-width:80vwを設定し、画面幅を超えにくくしています。また、画面幅640px以下では全体の余白を小さくし、ツールチップの横幅を240pxから200pxへ、最大横幅を55vwへ変更します。
コメント