ウェブ木箱：HTML講座-ツールチップを表示させる

ツールチップとはカーソルを乗せた時に出てくる文字のこと。画像にツールチップを表示させるには初級編の代替テキストのところで紹介したalt属性を <img>につければいいんだ。


<img src="risu.gif" alt="りすりす">

プレビュー♪ -

■altによるツールチップ－動作確認ブラウザ

IE6.0

NN4.7

~~NN7.0~~

~~Opera7.0~~

－ブラウザ別情報－
NN7.0,Opera7.0ではalt属性そのものには対応しているもののalt属性によるツールチップは出ない。

もう１つの方法としてタグにタイトル(補助的情報)をつける属性をつける方法もある。

タグにタイトルをつける属性名はtitleだよ。

属性値は任意の文字が使えるよ。


<img src="risu.gif" title="りす～♪">

プレビュー♪ -

■titleによるツールチップ(画像)－動作確認ブラウザ

IE6.0

~~NN4.7~~

NN7.0

Opera7.0

－ブラウザ別情報－
altとtitleを両方つけた場合、IE6.0ではtitleが優先される。

リンクにツールチップを表示させる場合も画像と同様、title属性を使うよ。


<a href="index.html" title="HTML講座トップに戻るよ">リンク</a>

■titleによるツールチップ(リンク)－動作確認ブラウザ

IE6.0

~~NN4.7~~

NN7.0

Opera7.0

－ブラウザ別情報－
Opera7.0ではリンクにtitle属性がついていない時はジャンプ先のURLが表示される。(IEやNNでステータスバーに表示されるものと同様)

文字にツールチップを表示させる場合もこれまでと同様、title属性を使うよ。 title属性は<html>や<title>などのタグを除いて多くのタグにつけることが出来るけどどのタグにつけてもツールチップが出るわけではないし使い勝手を考えると<div>や<span>などにつけるのがお勧めだね。


今日のメニューは<span title="卵でとじたトンカツを乗せた丼">カツ丼</span>だよん♪

■titleによるツールチップ(文字)－動作確認ブラウザ

IE6.0

~~NN4.7~~

NN7.0

Opera7.0

－ブラウザ別情報－
ツールチップの内容が長い場合は IE6.0では自動改行されるものの Opera7.0では画面からはみ出し、NN7.0では途中で省略される。

	文字編
	HTML講座テーマ別

		画像にツールチップを表示させる

		リンクにツールチップを表示させる

		文字にツールチップを表示させる