【HTML】ツールチップを表示させるには？HTML・CSSのみで作ったデザイン例も紹介

HTMLを使って、ツールチップを実装したいと考えていませんか？

ツールチップは、ユーザーに次の動作への誘導やヒントなどを与える効果があり、とても便利な機能ですよね。

今回は、Webサイトにツールチップを表示させたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLを使ったツールチップをWebページに埋め込むことができるようになりますよ。

ぜひ最後まで読んでくださいね！

ツールチップとは？どんなときに使用するの？

そもそも、ツールチップとはどのようなものなのでしょうか？

ツールチップとは、少ない動作で、ヒントや説明などの情報を、適切に表示する機能のことです。

見慣れないアイコンや注釈が必要な単語などに、マウスをホバーさせて表示することが多いですね。

入力フォームの補助説明として利用することもあります。

ただし、便利だからといって、たくさん載せてしまうと、かえって見づらくなってしまいます。

ユーザーが利用しやすい適度な量を目指しましょう。

スマホには、マウスホバーのような機能はないので、表示できません。

必要不可欠な情報は、ツールチップではなく、常に閲覧できるようにした方が良いですね。

ツールチップのサンプル例

では、ツールチップは、具体的にどう実装すれば良いのでしょうか？

ここでは、

という2つの方法を紹介していきます。

title属性を使う方法

<a href="#" title="別タブで開きます" target="_blank">ツールチップ実装方法とは？</a>

title属性に文章を記入すると、マウスでホバーしたときに表示されるようになります。

title属性は、HTML5から追加されたabbr要素でも用いられていますね。

abbr要素は、「略語」や「頭字語」を表します。title属性には正式名称を書く決まりになっています。

<p><abbr title="HyperText Markup Language">HTML</abbr>で作成した文書は、<abbr title="Cascading Style Sheets">CSS</abbr>を使ってスタイリングします。</p>

上記のコードでは、「HTML」と「CSS」の部分に下線が引かれ、マウスを合わせると正式名称が表示されます。

カスタムデータ属性を使う方法

HTMLのカスタムデータ属性を利用して、ツールチップを実装することができます。

カスタムデータ属性とは、「data-○○」という表記で、自由に作成できる属性です。

実際に、「data-tooltip」という属性を設定した例を書いていきます。

<span class="tooltip" data-tooltip="吹き出しの形も自由に変えられます">カスタムデータ属性でツールチップ実装</span>

CSSでの記述は以下のようになります。

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

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

/* 吹き出しのひげ部分 */
.tooltip::before {
  content: "";
  border: 10px solid transparent;
  border-bottom-color: #000;
  top: 10px;
  left: 10px;
}

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

/* マウスホバーしたときの設定 */
.tooltip:hover::before{
  top: 16px;
  opacity: 1;
}

.tooltip:hover::after{
  top: 36px;
  opacity: 1;
}

before擬似要素とafter擬似要素を使って、ツールチップの吹き出しのひげ部分と本体を作成します。

初めは、ツールチップを隠しておき、マウスをホバーしたときに表示されるようにしています。

ツールチップの文章は、「content: attr(data-tooltip)」と指定することで、「data-tooltip」の値を設定することができます。

吹き出しの形は、自由にデザインできるので、実際にコードを書いてみてくださいね。

まとめ：HTMLツールチップは使いどころを考えることが大事

今回は、HTMLを使ったツールチップの実装方法を紹介しました。

使いすぎるのは厳禁ですが、Webページの表示をすっきりさせる効果もあるので、ぜひ実装してみてください。

Webページをデザインする際に、今回の記事が少しでも参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！