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

公開日: : 最終更新日:2013/11/26 アウトライン , , , , ,

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で検証しました。
(その他のブラウザーでは表示が異なるかも知れません。)

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 13 follow us in feedly

関連記事

TABLEタグでセルサイズを同じにする

TABLEタグでセルサイズを同じに TABLEタグのセルのサイズをどのセルも同じ幅に したい場合

記事を読む

番号付きリスト(Ordered List)<ol>タグをネストして表示する

番号付きリスト(Ordered List)<ol>タグをネストして表示してみます。

記事を読む

SQLServer

disabledになっている値をサーバにPOSTする

disabledの値をサーバーにPOSTする HTMLでFORMに貼りつけた値をサーバのCGI

記事を読む

はみ出した文字を表示しない方法

IEでもChromeでもTDからはみ出した文字を消す IEでもChromeでもHTMLでTABLE

記事を読む

htmlでホームページに楽譜を表示するためのJavascript abcjs

htmlでホームページに楽譜を表示するためのJavascript 「abcjs」というのが

記事を読む

HTMLでブラウザ画面に印刷ボタン作成

Hブラウザー上に印刷ボタンを配置する HTMLで作成した画面をブラウザー表示し、 その画面に

記事を読む

入力中のテキストボックスの背景色を変える

HTMLで入力中の背景色を変える よくあるパターンで入力中のエリアをわかりやすく するために

記事を読む

ブラウザーのキャッシュを無効にする

ブラウザーのキャッシュを無効に 表示速度の改善などに役立つブラウザーのキャッシュですが、 処理に

記事を読む

HTMLサンプル

h2 h1 h2 h3 h4 h5 head1head2

記事を読む

はみ出した文字を表示しない方法

IEでもChromeでもTDからはみ出した文字を消す IEでもChr

htmlでホームページに楽譜を表示するためのJavascript abcjs

htmlでホームページに楽譜を表示するためのJavascrip

HTMLサンプル

h2 h1 h2 h3 h4 h5 h

TABLEタグでセルサイズを同じにする

TABLEタグでセルサイズを同じに TABLEタグのセルのサイズをど

番号付きリスト(Ordered List)<ol>タグをネストして表示する

番号付きリスト(Ordered List)<ol>タグをネ

→もっと見る



PAGE TOP ↑