【CSS】ツールチップをHTMLとCSSだけで簡単に作る

CSSツールチップは、要素にカーソルを合わせたときに表示される小さな情報ボックスです。

ホバーしてください。

基本構造
1. <span> を使う
2. data-tooltip 属性を使う
スタイル
位置のカスタマイズ
デザインのカスタマイズ
アニメーション

基本構造

ツールチップを作成するには、たくさんの方法があって、本文は一般的な二つの方法を紹介します。

<span> を使う

要素に対してツールチップを適用したい要素を作成します。

<span class="tooltip">ホバーしてください
  <span class="tooltiptext">ツールチップテキストです</span>
</span>

data-tooltip 属性を使う

要素に対してツールチップテキストを含める属性（例えば data-tooltip）を追加します。

<span class="tooltip" data-tooltip="これはツールチップです！">ホバーしてください</span>

data-tooltipはカスタムデータ属性の一例であり、data-プレフィックス（接頭辞）を使用して定義されます。これにより、HTML要素に追加情報を持たせることができます。data-tooltipという名前は一般的な用語であり、ツールチップテキストを格納するために使用されますが、他の名前でも機能します。

カスタムデータ属性では、data-プレフィックスの後に任意の名前を付けることができます。たとえば、data-info、data-hint、data-textなどを使用することができます。ただし、この名前は一貫性と可読性のために意味のあるものを選ぶことが推奨されます。

どの方法を使っても構いません。好みによります。違いはそれほど大きくありません。

<span> を使う場合：視覚的に隠れたテキストを含めることで、スクリーンリーダーなどのアクセシビリティツールに対応できます。また、ツールチップテキストをより簡単にスタイルを設定することができます。

data-tooltip 属性を使う場合：HTML構造がシンプルで、ツールチップテキストを要素の属性として直接指定できます。また、ツールチップテキストを JavaScript で動的に変更しやすいです。

スタイル

次に、CSSを使用してツールチップのスタイルを定義すれば完成です。

本文はdata-tooltip 属性を使う方法にします。ツールチップを上に配置しております。

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

位置のカスタマイズ

ツールチップの位置を変更するには、CSSの top、right、bottom、および left プロパティを調整します。

/* ツールチップを右に配置 */
.tooltip::before {
  bottom: 50%;
  left: 100%;
  transform: translateY(50%);
}

/* ツールチップを左に配置 */
.tooltip::before {
  bottom: 50%;
  right: 100%;
  transform: translateY(50%);
}

/* ツールチップを上に配置 */
.tooltip::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* ツールチップを下に配置 */
.tooltip::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

デザインのカスタマイズ

ツールチップの背景色、文字色、枠線、フォントサイズなどを変更することができます。

以下は、ツールチップデザインのカスタマイズ例です。

.tooltip::before {
  background-color: #f9ed69;
  color: #000;
  border: 1px solid #333;
  font-size: 14px;
}

アニメーション

CSSトランジションやアニメーションを使って、ツールチップの表示や非表示にスムーズなエフェクトを追加できます。

.tooltip::before {
  transition: opacity 0.3s, visibility 0.3s;
}

違いがわかりますね。

CSS ツールチップ