loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [ウェブデザイン] > 【CSS】ツールチップをCSSだけで表現する
この記事は約3分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2009.9.16

テキストにマウスオーバーした際、
補完コメント等を 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」をつけ加えなければならないのがガンです。

参照元:IE6で透過PNG表示を可能にするスクリプト考察【当サイト内記事】

demo

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「CUBEY (tcd023)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ