アイキャッチ画像
HOME > ウェブデザイン > 【CSS】ツールチップをCSSだけで表現する
公開日:2009.9.16
この記事は約3分で読めます。

【CSS】ツールチップをCSSだけで表現する

この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。

テキストにマウスオーバーした際、補完コメント等をCSSだけでツールチップ表示させてみるテクニックを拾ったのでご紹介します。

SIRIUSレビューイメージ画像

実装

たとえば

『本日のお買い得品は「竹墨石鹸」1,999,800円』という文章があったとして、「竹墨石鹸」という言葉にマウスオーバーしたときに(竹炭にはカルシウム、カリウム、ナトリウム、鉄分など、天然ミネラルが水に溶けやすい形で豊富に含まれている云々)といったツールチップが自動表示されるようにしたい場合、HTMLには下記のように記述します。

href には実際のリンクはないので「#」を記入します。

a要素のspanにツールチップとして表示させる文字を記載します。

ただし()などで文字列を括っておかないとアクセシビリティの問題があるかもしれません。

クラス名に今回は仮で「tip」を設定してます。

ツールチップの背景画像を別途画像編集アプリ(fireworksなど)で作っておくとツールチップ表示が目立ちます。その際、半透明にしたければアルファチャンネル付PNG形式で保存します。

文章が長めになったとき用に、画像の縦の長さは少し広めに作っておくといいでしょう。

文字列の長さに応じて縦幅が調整されます。

次にクラスに指定した「tip」にCSSで背景画像の位置や文字の大きさなどを設定しておきます。

背景画像はなくても構わないんですが、その時はボーダーで囲んでやるなどしないとツールチップテキストが目立たなくなるおそれがあります。

(背景画像の指定は下の方に書いておいたa.tip:hover のところで設定)

text-decoration: none; は「hover 時に表示されるツールチップテキストの下線をなくす」ための指定です。

background-colorはIE6用に必要で、ここではtransparent にしておきました。

さらに、

display: none; は span要素のテキストを「通常は表示させない」ための指定です。

margin-top を「0」にすると「竹墨石鹸」の文字に被るので最低でも 1em以上をとればテキストの下に表示されるようになります。

margin-right を「0」にすると「竹墨石鹸」の右下がツールチップ表示の始まりになる感じなので、数値を適当に調整のこと。

width は「背景画像と同じ幅」にします。

padding は背景画像内での余白と考えればよく、「0」にすれば「背景画像の端に隙間がない」状態でテキストが表示されるようです。

line-height は実際にブラウザで見て適当に調整のこと。

ツールチップ表示の各設定はお好みで。

背景画像に透明度が設定されてなければこここで終了になります。

もしも透明度が設定されている場合、IE6で透過PNGを表示させたいなら「DD_belatedPNG.js」等を使う必要があります。

ところがこれがどうやってもうまくいきません。

どうしても半透明画像にこだわりたい場合は「ie7.js」で可能になります。

ただしファイル名の最後に「-trans」をつけ加えなければならないのがガンです。

demo

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)