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

公開日: 2021.09.15
更新日: 2024.01.06
html ツールチップ

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

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

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

  • HTMLのツールチップとは
  • ツールチップの実装方法について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここでは、

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

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

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

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5