CSS の background 画像にツールチップを表示するテクニック
CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性(または alt 属性)を指定した時のようにツールチップを表示させる方法です。*1
これは mixi の「小粋なユーザコミュニティ」の質問「ブログのタイトルバナー画像に alt 属性は設定できますか?」の回答です。*2
CSS の background 画像に alt 属性を設定することはできませんが、同様の機能を実現することは可能です。
とりあえず img 要素を用いた画像と、div 要素に background 指定した画像のサンプルを用意しましたのでお試しください。
右クリックすれば異なる設定であることがお分かりになると思いますが、いずれの画像もマウスをポイントするとツールチップを表示するようにしています。
img 要素 + alt 属性のサンプル

div 要素 + background 指定のサンプル
ということで回答です。
background 指定の画像は、画像を設定した元の HTML タグに title 属性を設定することでツールチップを表示させています(青色部分)。
HTML
<div id="logo" title="This is Movable Type logo."></div>
CSS
#logo {
width:120px;
height:60px;
background: url(http://path/to/images/logo.gif) no-repeat;
}
サンプルは div 要素を用いましたが、title 属性が設定可能なタグであればツールチップの表示が可能と思われます。また画像を表示しなくても、例えばテキストにマウスをポイントしてもツールチップは表示されます。
参考サイト:RE: [css-d] ALT attributes in CSS background images
2006.09.18 追記
*1、*2 を追加しました。
2006.09.21 追記
「alt 属性= ツールチップ表示」という誤解を招くため、タイトル変更しました。
*1:alt 属性は、画像が表示されない場合の代替テキスト表示が本来の目的で、ツールチップ表示はブラウザ依存です(エントリー投稿以前よりその認識はありましたが説明不足でした)。例えば img 要素を Mozilla 系ブラウザ(Firefox 等)や Opera で表示する場合、title 属性を設定しないとツールチップは表示されません(サンプル(上)は title 属性も設定しています)。
*2:質問自体はツールチップ表示を期待されたものであるかどうかは定かではありません(私の一方的な解釈です)。「代替テキスト表示」が目的であれば解決するための内容はありません。
- ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法
- CSSで3D画像を実現するサンプルいろいろ
- CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
- CSSでクラスセレクタをくっつけて並べる方法
- pre要素で折り返しをするためのCSS
- Google Chromeでfloatレイアウトが崩れる件について
- IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
- IE6/IE7/IE8/IE9のCSSハック
- ColumnResizerリニューアル
- ドロップシャドウつきの画像をセンタリングする
- CSS で table に斜線を引く方法
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
≫ img 要素の扱いと alt 属性 from SOL
ツールチップと alt 属性。ツールチップを表示させたいなら title 属性か、できればスクリプトを使うほうがよりよい、という話。 [続きを読む]
