【HTML・CSS】ツールチップを表示したい時の指定方法のご紹介！改行を無くしたい場合の対処法も！

対象にカーソルやマウスポインターを合わせると表示される事がある「ツールチップ（ツールヒント）」。

リンク等に補足情報を追加する際に便利ですが、今回は、どのようにしてツールチップを表示させるのか解説します。

1 ツールチップとは？
2 表示方法について解説
- 2.1 title属性を使う方法
- 2.2 data属性を使う方法
3 改行が入ってしまう場合の対処方法
4 まとめ

ツールチップとは？

お悩みさん

そもそも、ツールチップって何ですか？

ツールチップとは、対象にカーソルやマウスポインターを合わせると表示される補足説明の事です。言葉だけでは伝わりづらいと思いますので、下記サンプルをご覧ください。

サンプル

ホバーして数秒待つと、「jpg画像 1MB」という文字列が表示されると思いますが、これがツールチップです。

見慣れないアイコンや補足が必要な単語などに表示する場合が多いです。

表示方法について解説

では、どのようにしてツールチップを表示させれば良いのか解説します。今回は、2パターンご紹介します。

ツールチップ表示方法

・title属性を使う方法
・data属性を使う方法

title属性を使う方法

1つ目は、title属性を使用する方法です。

 <div><a href="パスが入ります" title="jpg画像 1MB"></a></div>

サンプル

title属性に表示させたい文字列を指定する事で、ツールチップが表示されるようになります。aタグやabbrタグにtitle属性を付ける事が多いです。

data属性を使う方法

2つ目は、HTMLのdata属性（カスタムデータ属性）を使う方法です。data属性はdata-〇〇の表記で自由に作成できます。この方法では、HTMLとCSSを使用します。

<div>サンプル画像は、<span class="tooltip" data-tooltip="補足テキストが入ります">こちらからダウンロード</span>出来ます。</div>

.tooltip {
  position: relative;
  cursor: pointer;
}

/* ツールチップ全体の指定 */
.tooltip::before,
.tooltip::after {
  position: absolute;
  transition: all 0.3s;
  opacity: 0;
}

/* 吹き出しの先の部分の指定 */
.tooltip::before {
  content: "";
  border: 10px solid transparent;
  border-bottom-color: #2ca9e1;
  top: 10px;
  left: 10px;
}

/* 吹き出しの本体の指定 */
.tooltip::after {
  content: attr(data-tooltip);
  display: block;
  padding: 7px 13px;
  background: #2ca9e1;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  top: 30px;
  left: 0;
}

/* ホバーしたときの指定 */
.tooltip:hover::before {
  top: 16px;
  opacity: 1;
}
.tooltip:hover::after {
  top: 36px;
  opacity: 1;
}

サンプル画像は、出来ます。

上記のサンプルの「こちらからダウンロード」の部分をホバーすると、水色の吹き出しが表示されます。

この方法は、少し指定が複雑ですが、吹き出しの形を自由に変更できるという利点があります。