HTMLでツールチップ (Tooltip) を表示する方法(title属性)

HTMLで表を作成しそのセルにマウスを合わせるとツールチップ (Tooltip)を表示する方法です。

ツールチップ (Tooltip)は「title属性」で設定します。

以下のテーブルのセルにマウスを合わせるとツールチップ (Tooltip)が表示されると思います。

セル1-1 セル1-2 セル1-3
セル2-1 セル2-2 セル2-3
セル3-1 セル3-2 セル3-3

また、音声ブラウザではこの情報が読み上げられることが期待出来るようです。

ツールチップ (Tooltip)を利用すると、幅の狭いセルで表示文字が切れている場合などでも、そのセルにマウスを合わせることで内容を表示してユーザーを助けることができます。

このHTMLの動作はInternet Exlpore8、Internet Exlpore9、Internet Exlpore10、Internet Exlpore11、Google Chrome、Microsoft Edgeで検証しました。
(その他のブラウザーでは表示が異なるかも知れません。)

タイトルとURLをコピーしました