CSS の background 画像にツールチップを表示するテクニック

CSS の background 画像にツールチップを表示するテクニック

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

• css
• tips
• html