無理しないでゆっくり休んでね!

CSS ツールチップ

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

ホバーしてください。

上に配置する テキスト
右に配置する テキスト
下に配置する テキスト
左に配置する テキスト

基本構造

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

<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の toprightbottom、および 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;
}
僕をホバーしてください。

違いがわかりますね。

コメント

タイトルとURLをコピーしました