株式会社オートプロジェクト

Columnコラム
2023年1月6日
CSSだけで補足情報を表示させる方法

ツールチップって何?

ツールチップは、テキストやリンク、画像などの補足説明の事でマウスオーバーした際に表示されます。ALTに近いものになります。

ツールチップの実装のためにCSSの関数attr()を利用することができます。

以下、実装例になります。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

「Result」枠の「補足説明に必要な ツールチップ」の「ツールチップ」をマウスオーバーすると補足説明がでます。

ALTと違い音声での読み上げがないので、読み上げが必要となる記事に使うのも良いと思います。
また、デザインの調整もできますのでALTよりも使い勝手が良いですね。