スライドイン・スライドアウトするツールチップの作り方
スライドイン・スライドアウトするツールチップの作り方を、HTMLとCSSのサンプルコードを使って紹介します。このサンプルでは、ボタンへマウスカーソルを合わせるとツールチップが下から上へ移動しながら表示され、マウスカーソルを外すと元の位置へ移動しながら非表示になります。
表示と非表示の切り替えにはCSSの:hoverを使用し、ツールチップの移動にはtransform、フェードにはopacityを使用します。JavaScriptを使用せずに実装できるため、シンプルな構成でスライドアニメーション付きのツールチップを追加できます。移動距離やアニメーション時間を変更すれば、スライドの動きも用途に合わせて調整できます。
管理画面の操作説明、会員サイトの補足情報、ECサイトの商品オプション、フォーム内の入力項目やボタンの説明など、対象へマウスカーソルを合わせたときに補足情報を表示したい場面で利用できます。ツールチップの文章、背景色、文字色、余白、角丸、表示位置、スライドする距離、アニメーション時間などは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="tooltip-slide_wrap">
<!-- タイトル -->
<div class="tooltip-slide_title">
スライドするツールチップ
</div>
<!-- 説明文 -->
<p class="tooltip-slide_text">
ボタンへマウスカーソルを合わせると、ツールチップがスライドインします。
</p>
<!-- ツールチップ表示エリア -->
<div class="tooltip-slide_area">
<!-- マウスホバーするボタン -->
<button
class="tooltip-slide_button"
type="button"
>
ボタン
</button>
<!-- スライドするツールチップ -->
<div class="tooltip-slide_message">
スライドして表示されます。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではボタンとツールチップを配置し、CSSでは表示位置、色、余白、角丸に加えて、スライドイン・スライドアウトの動きを設定します。JavaScriptは使用せず、CSSの:hoverとtransform、opacityを組み合わせて、マウスホバーに合わせた表示と非表示を実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタンの文字、ツールチップに表示する文章を変更できます。
style.cssはサンプル全体とツールチップのデザイン、スライドアニメーションを設定するファイルです。全体の横幅や余白、ボタンの背景色、ツールチップの横幅や表示位置、スライドする距離、フェード時間などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込む構成になっているため、追加のJavaScriptや外部ライブラリは必要ありません。
表示されたボタンへマウスカーソルを合わせると、ツールチップが下側から上側へ移動しながらスライドインします。マウスカーソルをボタンから外すと、ツールチップが下方向へ移動しながらスライドアウトして非表示になります。
カスタマイズできる内容
index.htmlでは「スライドするツールチップ」のタイトル、説明文、「ボタン」の文字、ツールチップ内の「スライドして表示されます。」の文章を変更できます。用途に合わせて、操作説明や補足情報などの文章へ書き換えられます。
style.cssではサンプル全体の横幅、背景色、余白、角丸、ボタンの背景色、文字色、文字サイズ、ツールチップの横幅、背景色、文字色、表示位置、余白、角丸、スライドする距離、アニメーション時間などを変更できます。
数値調整
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を大きくするとボタンから離れ、小さくすると近くなります。
max-width:280px;
ツールチップの最大横幅です。値を大きくすると横へ広がり、小さくすると文章が折り返されやすくなります。
padding:10px 16px;
ツールチップの内側余白です。上下の10pxと左右の16pxを変更すると、文章と外側の間隔を調整できます。
border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.6;
ツールチップ内の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transform:translate(-50%,10px);
非表示時のツールチップを下方向へ移動させる値です。10pxを大きくするとスライドする距離が長くなり、小さくすると移動量が少なくなります。マウスホバー時にはtranslate(-50%,0)へ移動するため、この差がスライドイン・スライドアウトの移動距離になります。
transition:.3s;
ツールチップの移動と透明度が変化する時間です。0.3秒でスライドします。値を大きくするとゆっくり、小さくすると速く動きます。
border:6px solid transparent;
ツールチップ下部に表示する三角形の大きさに関係する値です。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;により、画面幅に合わせてサンプル全体が縮小されます。ツールチップにはmax-width:280px;を設定し、表示内容が広がりすぎないようにしています。
画面幅640px以下では、ページ外側の余白をpadding:24px 12px;、サンプル全体の内側余白をpadding:24px 18px;へ変更します。さらにツールチップの最大横幅をmax-width:75vw;へ変更し、狭い画面でも画面幅に収まりやすいようにしています。スマートフォン・タブレット・PCで利用できます。
コメント