tooltip(ツールチップ)をHTMLの属性だけで表示させる方法

ツールチップはマウスのカーソルをのせた時に表示される文字のことです。

HTMLのtitle 属性を使用することで、tooltip(ツールチップ)を 表示させることができます。

どんなタグでもtitle属性を使用できますが、 実際には a タグや 略語をあらわす abbr タグで使用することが多いでしょう。

但し、スマートフォンやタブレットではホバーがないので表示されません。 その点に注意してツールチップを使用する必要があります。

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

下の2つの文字列にマウスカーソルをのせるとツールチップが表示されます。

★ サンプル

★ 経団連

■ HTML

<p><a title="ツールチップのサンプル"> ★ サンプル</a></p>

<abbr title="経済団体連合会">★ 経団連</abbr>