【初心者向け】HTML要素にマウスオーバーしたときにテキスト（ツールチップ）を表示する方法

はじめに

この短いチュートリアルでは、画像やリンクなどのHTML要素にユーザーがマウスを合わせた（ホバーした）ときに、簡単な説明文＝いわゆる「ツールチップ」を表示する方法を解説します。

ツールチップの追加は数秒で完了します。使うのは、HTMLのtitle属性だけです。

ホバー時にテキストを表示する基本の方法

以下は、ルービックキューブの画像を使った基本的な例です。画像の上にマウスを移動して1〜2秒待つと、ルービックキューブに関する追加情報がポップアップ表示されます。

上記の画像要素のHTMLマークアップは次のとおりです。

<img
  src="url-to-image-file"
  title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
  alt="A Rubik’s Cube"
/>

続いて、リンク（アンカー）要素にマウスを合わせたときにツールチップを表示する場合を見てみましょう。下のリンクにマウスを移動してみてください。

最新記事

HTMLマークアップは以下のとおりです。

<a href="https://techstacker.com" title="Link to TechStacker’s front page"
  >Latest articles</a
>

以上で完了です。title属性は、どのHTML要素にも自由に追加できます。

マウスオーバー時のテキスト表示はなぜ有益なのか？

シンプルすぎるために、かえってユーザーを混乱させてしまう可能性のある要素があります。代表例が「アイコン」です。ほとんどの人は、認識できるアイコンの種類はごくわずかですが、西欧圏だけでも数千種類ものアイコンが存在します。

アイコンにtitle属性を追加しておけば、UI上のどこにそのアイコンがあっても、ユーザーはその機能についての明確な説明を確認できるようになります。

ここで、「そもそも、要素にマウスを合わせると追加情報が表示されることを知っている人はどれくらいいるのか？」という疑問が浮かぶかもしれません。

鋭い指摘です。答えは「ターゲット層によって異なる」です。ITに詳しい人であれば、ホバーして1〜2秒待つと詳細情報が表示されることが多い、ということは直感的に理解しています。

しかし、もしサイト訪問者の大半がITに詳しくない人や、ウェブをあまり利用しない人だったらどうでしょうか？

その場合の基本方針としておすすめしたいのが、Luke Wroblewskiの有名な格言です。

Obvious always wins.
（わかりやすさは常に勝つ）

アイコンが不明瞭、少なくとも大多数の人にとって直感的に伝わらないのであれば、より分かりやすいアイコンに作り替えるか、アイコンに簡潔な説明を添えるべきです。

いずれにしても、title属性の追加、そしてもちろん視覚障害者向けスクリーンリーダーのためにalt属性を追加することには、メリットしかありません。すべての要素に付ける必要はありませんが、迷ったら付けておくのが得策です。

SEOへの影響

さらに嬉しいことに、少なくともalt属性はSEOにも良い影響を与えます。間接的には確実に、そしておそらく直接的にも効果があると考えられます。

なぜなら、alt属性の説明文は「アクセシビリティ」のカテゴリーに属し、Googleはウェブサイトの品質評価においてアクセシビリティを考慮していることを公言しています。これはSEOランキングにも影響します。

一方、title属性については、かつてはSEOに影響していたようですが、最新の調査では、現在も影響があるかどうかは定かではありません。とはいえ、title属性の使用に明確なデメリットはなく、導入するメリットの方がはるかに大きいといえます。

より高度なツールチップの実装方法

ブラウザ標準のツールチップ（title属性）では物足りず、よりカスタマイズされたデザインが必要になるケースもあります。その場合は、JavaScriptとCSSを組み合わせることで、表示タイミングや見た目を自由に制御できます。この便利なテクニックについては、今後のチュートリアルで詳しく解説する予定です（執筆リストに追加済みです！）。お楽しみに。