Zenn
💬

HTMLとCSSだけで作るツールチップ

2020/10/17に公開
CSS
Scss
tech

ツールチップとは

ツールチップ（Tooltip）とは、マウスカーソルが重なったときに補足説明が小さく表示される機能のことです。

ツールチップのイメージ

👆例えばこちらのスクリーンショットはGoogleスプレッドシートのツールチップです。

使いどころ

アイコンを使ったボタンやタブなど、抽象的な表現を補足する形で使うとユーザー体験の向上が期待できます。また、専門用語（略語）の正式名称や別名をツールチップで表現するのも1つの手段でしょう。

ツールチップをHTMLとCSSで実現する

ツールチップはJavaScriptを使わなくても、HTMLとCSSだけで実現できます。

方針

やることは単純です。ツールチップはCSSで非表示にしておき、親要素がホバーされたときのみツールチップの非表示を解除します。

CSS

まずツールチップを実現するためのCSSを書いておきます。登場するクラスは次の2つです。

  1. .tooltip：カーソルを重ねたときにツールチップを載せたい要素
  2. .tootip-text ：ツールチップの内容
/* カーソルを重ねる要素 */
.tooltip {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: -30px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 5px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
  font-size: 0.8rem; /* フォントサイズ */
  line-height: 1.3; /* 行間 */
  background: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

サイト全体で使う場合は、このCSSをグローバルCSSに含めるか、コンポーネントを作っておくと良いかと思います。

（Zennでもこの方法でツールチップを実装していますが、使い回しやすいように<TooltipContainer />と<TooltipText />というReactコンポーネントを作っています）

HTML

CSSを追加したら、ツールチップを使いたいところで以下のようなHTMLを書きます。

<button class="tooltip">
	<span class="tooltip-text">ツールチップの内容</span>
	ボタンテキスト
</button>
  • ツールチップを持つ要素（tooltip）にはbuttonタグを使っていますが、spanタグでも、aタグでもOKです。
  • 表示するツールチップの内容（tooltip-text）にはspanタグを使います。

使用例

実際の使用イメージは以下のようになります。テキストやボタンにカーソルを重ねるとツールチップが表示されます。

吹き出し形にする

なお、CSSに以下を追加すると、ツールチップが吹き出しの形になります（疑似要素で三角形を追加しています）。

.tooltip-text:before {
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-bottom: 7px solid #333;
}

以上、簡単なツールチップの作り方でした。

Discussion