【HTML】title 属性の使い方｜ホバーでツールチップ（補足説明）を表示する方法

リンクやボタンにマウスを乗せると、少し遅れて小さな説明の吹き出しが出ることがあります。あの補足説明（ツールチップ）を、JavaScript もCSSも使わずに表示できるのが HTML の title 属性です。この記事では、title 属性の基本の書き方、どんな要素に付けられるか、略語に正式名称を添える abbr との組み合わせ、そして意外と見落とされがちなアクセシビリティ上の注意点までを、実際に動くデモを交えて初心者向けに解説します。

title 属性は補足説明を添える属性

title 属性は、要素に「補足的な情報」を添えるためのグローバル属性です。グローバル属性とは、特定のタグ専用ではなく、ほぼすべての HTML 要素に付けられる属性のことです。title を指定した要素にマウスカーソルを乗せてしばらく待つと、ブラウザがその文字列をツールチップとして表示します。書き方はとてもシンプルです。

<!-- マウスを乗せると「トップページに戻ります」と表示される -->
<a href="/" title="トップページに戻ります">ホーム</a>

<!-- ボタンにも付けられる -->
<button type="button" title="まだ保存していません">下書き保存</button>

属性値に書いた文字列が、そのままツールチップの中身になります。見た目（フォントや色、表示までの待ち時間）はブラウザが決めるため、こちらでは指定できません。まずは実際に動かして、表示のされ方を確かめてみましょう。

<p>
  次のリンクや略語にマウスを乗せて（スマホは長押しして）みてください。
  少し待つと、<code>title</code> に指定した説明がツールチップとして表示されます。
</p>

<ul>
  <li>
    <a href="#" title="トップページに戻ります">ホーム</a>
  </li>
  <li>
    <abbr title="HyperText Markup Language">HTML</abbr> は Web ページを作る言語です。
  </li>
  <li>
    <button type="button" title="まだ保存していません">下書き保存</button>
  </li>
</ul>

body {
  font-family: sans-serif;
  line-height: 1.8;
  padding: 12px;
}

/* title を持つ abbr は下線を点線にすると「説明がある」と伝わりやすい */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

a {
  color: #007bff;
}

button {
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
}

マウスを乗せて少し待つと、それぞれの title の内容が吹き出しで表示されたはずです。このように、追加のライブラリなしで簡単な補足説明を付けられるのが title 属性の手軽さです。

abbr と組み合わせて略語の正式名称を示す

title 属性がもっとも自然に活きるのが、略語を表す <abbr> 要素との組み合わせです。<abbr title="正式名称">略語</abbr> と書くと、略語にマウスを乗せたときに正式名称が表示されます。読者が略語の意味を知らなくても、その場で確認できるようになります。

<p>
  <abbr title="HyperText Markup Language">HTML</abbr> と
  <abbr title="Cascading Style Sheets">CSS</abbr> は
  Web ページの基本です。
</p>

先ほどのデモの CSS では、abbr[title] に点線の下線（text-decoration: underline dotted）とヘルプカーソル（cursor: help）を指定していました。title の存在は見た目では分かりにくいため、こうした装飾で「ここに補足がありますよ」と視覚的に伝えると、より親切になります。

alt 属性との違い

画像でよく使う alt 属性と混同されがちですが、両者は役割がまったく違います。alt は「画像が表示できないときの代わりのテキスト」であり、画像の内容を伝える必須級の情報です。一方 title は、あくまで補足的な情報で、無くても内容が伝わることが前提です。

大切なのは、「無いと意味が通じない情報」を title だけに入れないことです。次に説明するとおり、title はすべての人が見られるわけではないためです。

title に頼りすぎてはいけない理由

キーボード操作やスマホでは表示されにくい

title のツールチップは、基本的にマウスのホバーで表示されます。そのため、マウスを使わずキーボードで操作する人には表示されません。スマートフォンやタブレットのようなタッチ操作の端末でも、そもそも「マウスを乗せる」動作がないため、確実には表示されません（長押しで出る場合もありますが、環境に依存します）。つまり、title の内容にたどり着けない利用者が一定数いるということです。

重要な情報は本文や見えるラベルに書く

この性質から、操作に必須な説明やボタンの役割など、本当に伝えるべき情報を title だけに任せるのは避けるべきです。たとえばアイコンだけのボタンなら、title に頼るのではなく、見えるラベルを添えるか、スクリーンリーダー向けの aria-label を併用します。title は「知っていると少し便利」という程度の、あくまで補助的な情報にとどめるのが安全です。凝ったツールチップをすべての利用者に確実に見せたい場合は、CSS や JavaScript で自作する方法を検討することになります。

まとめ

title 属性は、要素にマウスを乗せると補足説明のツールチップを表示する、手軽なグローバル属性です。ほぼすべての要素に付けられ、とくに <abbr> と組み合わせて略語の正式名称を示す使い方が自然です。ただし、キーボード操作やタッチ端末では表示されにくいという弱点があり、すべての利用者が見られるわけではありません。そのため、無くても困らない補足的な情報にとどめ、操作に必須な説明は本文や見えるラベル、aria-label などで伝えるのが基本です。alt のような「必須情報」とは役割が違うことを意識して、title は「あると少し親切」というプラスアルファの用途で使いましょう。

参考ページ

• title – HTML: グローバル属性 | MDN
• <abbr> – HTML | MDN