対象にカーソルやマウスポインターを合わせると表示される事がある「ツールチップ（ツールヒント）」。
リンク等に補足情報を追加する際に便利ですが、今回は、どのようにしてツールチップを表示させるのか解説します。
ツールチップとは？
そもそも、ツールチップって何ですか？
ツールチップとは、対象にカーソルやマウスポインターを合わせると表示される補足説明の事です。言葉だけでは伝わりづらいと思いますので、下記サンプルをご覧ください。
ホバーして数秒待つと、「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;
}上記のサンプルの「こちらからダウンロード」の部分をホバーすると、水色の吹き出しが表示されます。
この方法は、少し指定が複雑ですが、吹き出しの形を自由に変更できるという利点があります。
改行が入ってしまう場合の対処方法
ツールチップを指定した文字列が短い場合、表示されるツールチップが改行されて表示されてしまい、みづらいという場合は、下記の指定をしてあげてください。
.tooltip {
white-space:nowrap;
}CSSの「white-spaceプロパティ」は、HTMLコード内のタブ、改行等をどのように表示させるかを決めるプロパティです。
この指定で、改行されるのを防ぐ事が出来ますのでお試しください。
まとめ
今回は、ツールチップの表示方法について解説しました。
知っておくと便利なテクニックなので、是非使っていただければ幸いです。
コメント