ユーザーがHTML要素の上にマウスを移動したときにテキストを表示する方法

この超高速チュートリアルでは、ユーザーが画像やリンクなどの要素にカーソルを合わせたときに、簡単な説明テキスト（ツールチップなど）を表示する方法を学習します。

ツールチップを追加する方法は数秒かかりますHTMLタイトル属性titleを使用するだけです 。

ホバー（要素の上にマウスを置く）にテキストを表示する

これは、ルービックキューブの画像の基本的な例です。この画像の上にマウスを移動すると、数秒以内にルービックキューブに関する追加情報がポップアップ表示されます。

上記の画像要素の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要素への属性。

理由 ユーザーが有益な要素の上にマウスを移動すると、テキストが表示されますか？

その単純さのために、一部の人々に混乱を引き起こす可能性のある要素があるとしましょう。例として、アイコンがあります。ほとんどの人はほんの一握りのアイコンしか認識できませんが、西側の世界だけでも文字通り何千もの異なるアイコンが表示されています。

アイコンにタイトル属性を追加するだけで（たとえば、画像要素内）、アイコンの機能の明確な説明を取得するオプションがあります。 UIのどこにでも存在します。

さて、あなたは自分自身に考えるかもしれませんが、要素にカーソルを合わせると追加の情​​報が表示されることがあることを知っている人はどれくらいいますか？

それは素晴らしい質問です。答えはそれがあなたのターゲットオーディエンスに依存するということです。ほとんどの技術に精通した人々は、ホバリング+ 1〜2秒待つと、主題に関する追加情報が明らかになることが多いことを直感的に知っています。

しかし、オーディエンスの大部分が技術に精通していない人々、またはおそらくWebをあまり閲覧しない人々だけで構成されている場合はどうでしょうか。

それでは、私のデフォルトのアクションは、ルーク・ウロブレフスキーの普遍的なアドバイスを適用することです：

明らかなものが常に勝ちます。

アイコンがはっきりしない場合、または少なくとも多くの人にとってはっきりしない場合は、より良いアイコンを作成するか、そのアイコンと簡単な説明を組み合わせます。

とにかく、タイトル属性を追加し、もちろん ALT属性（スクリーンリーダー用、視覚障害者用）には利点しかありません。すべてに追加する必要はありませんが、疑問がある場合は追加することをお勧めします。

追加のボーナスとして、少なくともALT属性もSEOに影響を及ぼしますが、少なくとも間接的には影響しますが、おそらく また直接。

どうして？ ALTの説明はアクセシビリティのカテゴリに分類されますが、Googleはこれを秘密にしておらず、ウェブサイトの品質を評価する方法に影響を与え、SEOのランキングに影響を与えます。

タイトル属性に関しては、以前は SEOに影響を与えますが、私の最新の調査によれば、それが今日でも影響を与えるかどうかは不明です。ただし、繰り返しになりますが、title属性を使用することには明らかな欠点はなく、利点だけがあります。

代替のツールチップメソッド

組み込みのHTMLツールチップ/タイトル属性のよりカスタムバージョンが必要になる場合があります。その場合、JavaScriptとCSSを使用して、さまざまなユースケースのツールチップの時間とスタイルの両方を使用できます。その便利なスキルについて説明します 将来のチュートリアルで（これは私の書き込みリストにあります！）