長い文章を表示できるツールチップの作り方
長い文章を表示できるツールチップの作り方を、HTML・CSSのサンプルコードを使って紹介します。ツールチップの横幅を指定し、文章が長い場合でも適切な位置で折り返して表示できるようにすることで、短い補足だけでなく複数行の説明文も表示できます。
このサンプルでは、ボタンへマウスカーソルを合わせると、ボタンの上側にツールチップを表示します。ツールチップには最大幅を設定し、文章を複数行に折り返して表示します。JavaScriptを使用せず、CSSの:hoverを利用して表示と非表示を切り替えるシンプルな構成です。
操作方法の説明、入力項目の補足、ボタンの機能説明など、短い文章だけでは内容を伝えにくい場面で利用できます。ツールチップの文章や横幅、背景色、文字色、余白、文字サイズ、表示位置などは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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ツールチップ全体 -->
<div class="tooltip-long-text_wrap">
<!-- タイトル -->
<div class="tooltip-long-text_title">
長い文章を表示できるツールチップ
</div>
<!-- 説明文 -->
<p class="tooltip-long-text_text">
ボタンへマウスカーソルを合わせると、長い文章を複数行で表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="tooltip-long-text_area">
<!-- マウスホバーするボタン -->
<button
class="tooltip-long-text_button"
type="button"
>
ボタン
</button>
<!-- 長い文章を表示するツールチップ -->
<div class="tooltip-long-text_message">
このツールチップは長い文章を表示するためのサンプルです。文章が長くなった場合は、指定した横幅に合わせて複数行に折り返して表示されます。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではボタンとツールチップに表示する長い文章を配置し、CSSではツールチップの横幅、文章の折り返し、表示位置、背景色、余白、マウスホバー時の表示・非表示などを設定します。JavaScriptを使用せず、ボタンへマウスカーソルを合わせたときのツールチップ表示をCSSの:hoverで実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタンの文字、ツールチップに表示する文章を変更できます。長い文章はtooltip-long-text_message内へ記述し、指定した横幅に合わせて複数行に折り返して表示します。
style.cssはツールチップ全体のデザインと表示動作を設定するファイルです。全体の横幅や余白、ボタンの背景色や角丸、ツールチップの横幅、背景色、文字色、文字サイズ、行間、表示位置、フェードなどを変更できます。:hoverを使用しているため、ボタンへマウスカーソルを合わせている間だけツールチップが表示されます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込む構成になっているため、追加のJavaScriptや外部ライブラリを用意する必要はありません。
表示されたボタンへマウスカーソルを合わせると、ボタンの上側にツールチップが表示されます。ツールチップ内の文章は指定した横幅に合わせて複数行へ折り返され、マウスカーソルをボタンから外すと非表示になります。
カスタマイズできる内容
index.htmlでは「長い文章を表示できるツールチップ」のタイトル、説明文、「ボタン」の文字、ツールチップ内の文章を変更できます。ツールチップへ表示したい内容はtooltip-long-text_message内の文章を書き換えてください。
style.cssではサンプル全体の横幅、背景色、余白、角丸、ボタンの色やサイズ、ツールチップの横幅、背景色、文字色、文字サイズ、行間、余白、角丸、ボタンとの間隔、フェード時間などを変更できます。ツールチップにはtext-align:left;を指定しているため、複数行になった文章は左揃えで表示されます。
数値調整
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;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
width:320px;
ツールチップの横幅です。値を大きくすると1行に表示できる文章量が増え、小さくすると文章が短い位置で折り返されます。
max-width:80vw;
ツールチップの最大横幅を画面幅に対して制限する値です。80vwは画面幅の80％を表し、狭い画面でツールチップが横へ広がりすぎるのを抑えます。
bottom:calc(100% + 12px);
ボタンとツールチップの間隔です。12pxを大きくするとボタンから離れ、小さくすると近くなります。
padding:14px 16px;
ツールチップの内側余白です。上下の14pxを大きくすると縦方向の余白が広がり、左右の16pxを大きくすると文章と左右端の間隔が広がります。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.7;
ツールチップ内の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:opacity .3s ease;
ツールチップを表示・非表示にするときのフェード時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
border:6px solid transparent;
ツールチップ下部に表示する三角形の大きさに関係する値です。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;により、画面幅に合わせてサンプル全体が縮小されます。ツールチップには通常時のwidth:320px;とmax-width:80vw;を指定し、画面幅に対して横へ広がりすぎないようにしています。
画面幅640px以下では、ページ外側の余白をpadding:24px 12px;、サンプル全体の内側余白をpadding:24px 18px;へ変更します。さらにツールチップをwidth:260px;、max-width:75vw;へ変更し、狭い画面でも長い文章を複数行で表示できるようにしています。スマートフォン・タブレット・PCで利用できます。
コメント