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

記事内に広告が含まれています。

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

HTMLでツールチップ (Tooltip) を表示する

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

<table border="1">
<tr>
    <td title="セル1-1">セル1-1</td>
    <td title="セル1-2">セル1-2</td>
    <td title="セル1-3">セル1-3</td>
</tr>
<tr>
    <td title="セル2-1">セル2-1</td>
    <td title="セル2-2">セル2-2</td>
    <td title="セル2-3">セル2-3</td>
</tr>
<tr>
    <td title="セル3-1">セル3-1</td>
    <td title="セル3-2">セル3-2</td>
    <td title="セル3-3">セル3-3</td>
</tr>
</table>

以下のテーブルのセルにマウスを合わせるとツールチップ (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をコピーしました