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

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

関連記事

no-img

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

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

記事を読む

keybord_black

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

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

記事を読む

no-img

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

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

記事を読む

SQLServer

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

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

記事を読む

no-img

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

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

記事を読む

no-img

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

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

記事を読む

no-img

HTMLサンプル

h2 h1 h2 h3 h4 h5 head1head2

記事を読む

no-img

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

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

記事を読む

no-img

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

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

記事を読む

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

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

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

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

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

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

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

disabledの値をサーバーにPOSTする HTMLでFORM

no-img
HTMLサンプル

h2 h1 h2 h3 h4 h5 h

→もっと見る



PAGE TOP ↑