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

CSSだけで補足情報を表示させる方法

CSSだけで補足情報を表示させる方法

ツールチップって何?

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

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

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

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

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

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

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

バックエンドについて、オートプロジェクトに問い合わせをする

Contact ご相談・お問い合わせ

実現の可否や概算費用、納期に関するご質問・ご相談も、
どうぞご遠慮なくお問い合わせください。

お問い合わせ ご相談・お問い合わせ
TOP