HTML でホバーテキストを追加する

1. HTML で title 属性を使用してホバーテキストを追加する
2. HTML で abbr タグ付きの title 属性を使用してホバーテキストを追加する

この記事では、HTML でホバーテキストを追加するいくつかの方法について説明します。ホバーテキストは、HTML のテキストにカーソルを合わせたときに表示されるツールチップテキストです。

HTML で title 属性を使用してホバーテキストを追加する

title 属性を使用して、HTML にホバーテキストを追加できます。この属性は、任意の HTML 要素で使用できます。

要素に関する追加情報を提供します。要素で title 属性を使用すると、要素の上にマウスを移動すると、ツールチップテキストまたはホバーテキストが作成されます。

たとえば、<button> タグを使用して Login ボタンを作成します。 <button> タグに属性 title を書き込みます。

次に、title 属性の値として this is a login button というテキストを入力します。

ボタンの上にマウスを置くと、ホバーテキストに this is a login button と表示されます。ここでは、インライン要素であるボタンを使用して title 属性を実装しました。

このように、title 属性を使用して HTML にホバーテキストを追加できます。

サンプルコード：

<button title="this is a login button">
  Login
</button>

HTML で abbr タグ付きの title 属性を使用してホバーテキストを追加する

このメソッドでは、title タグを使用して、abbr タグを使用しながらホバーテキストを追加する方法について説明します。通常、title 属性と abbr は一緒に使用されます。

abbr タグは略語を書くために使用され、title タグはマウスホバー中に略語の完全な形式を示すために使用されます。

たとえば、The Undertaker is a WWE superstar という文を考えてみましょう。WWE という単語を abbr タグで囲みます。

タグに属性 title を書き込み、値 World Wrestling Entertainment を付けます。

その結果、WWE という単語が点線の下線で表示されます。その上にカーソルを合わせると、World Wrestling Entertainment というホバーテキストが表示されます。

したがって、これは、title 属性を abbr タグとともに使用して、HTML でホバーテキストを作成する方法です。

サンプルコード：

The Undertaker is a <abbr title="World Wrestling Entertainment"> WWE </abbr> superstar.