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

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

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

実装

たとえば

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


<p>本日のお買い得品は<a class="tip" href="#">「竹墨石鹸」<span>（竹炭にはカルシウム、カリウム、ナトリウム、鉄分など、天然ミネラルが水に溶けやすい形で豊富に含まれている云々）</span></a>1,999,800円</p>

<p>本日のお買い得品は<a class="tip" href="#">「竹墨石鹸」<span>（竹炭にはカルシウム、カリウム、ナトリウム、鉄分など、天然ミネラルが水に溶けやすい形で豊富に含まれている云々）</span></a>1,999,800円</p>

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

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

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

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

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

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

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

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

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

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


a.tip:hover {
	text-decoration: none;
	background-color: transparent;
}

a.tip:hover {

text-decoration: none;

background-color: transparent;

}

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

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

さらに、


a.tip span {
	font-size: 1em;
	display: none;
	margin: 1.8em 0 0 -1em;
	padding: 5px;
	width:（背景画像と同じ幅）px;
	line-height: 1.3;
}

a.tip span {

font-size: 1em;

display: none;

margin: 1.8em 0 0 -1em;

padding: 5px;

width:（背景画像と同じ幅）px;

line-height: 1.3;

}

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

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

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

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

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

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

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


a.tip:hover span {
	color: (文字色);
	background-repeat: no-repeat;
	display: inline;
	position: absolute;
	background-image: url(背景画像パス);
	background-position: left top;
}