cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。

対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。

cssでリンク先のURLを表示する

まずはcssのみでリンク先のURLを表示させます。
マークアップは以下で固定。

<a href="/">かちびと.net</a>

HTMLはこのままで、cssのみでリンク先のURLをマウスオーバーによるツールチップで表示させます。

URLを表示させる

まずはURLを表示させます。

a[href]:after {
	content: attr(href);
	}

これはよく印刷用のcssで用いられる手段で、印刷する際に、URLも表示してあげると親切ですよね、っていうやつ。詳しくはRedLine Magazineさんの記事をご覧下さい。
とりあえず実装です↓

かちびと.net

リンク先が表示されました。

このように表示されるURLをマウスオーバーによるツールチップで表示させよう、というのが今日の内容です。

:afterをツールチップとして表示させる

a[href]:after {
	content: attr(href);
	margin-left: 1px ;
	display: block;    
	border: solid 1px #d3d2d2;    
	color: #666;    
	text-decoration: none;    
	position: absolute;    
	top: 20px;    
	left: 10px;    
	padding: 5px;    
	visibility: hidden;    
	width: 150px;
	z-index: 10; 
	}
a{ text-decoration:none;color: #000 ;position: relative;}

a:hover,
a:hover:after{ 
	visibility: visible; 
	z-index: 100; 
	}

このツールチップ表示方法は少し前に書いた地味に使えるCSS小技のメモに書いています。

擬似要素で表示させたURLをツールチップとして実装します。↓

かちびと.net

マウスを乗せるとツールチップが表示されるようになりました。

もうちょい工夫してみる

そっけないとなんだか怪しいので少しデザインして表示する意味を持たせます。

a[href]:after {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:bold;
	font-size: 16px ;
	content: "リンク先はこちら： "attr(href)" ";
	margin-left: 1px ;
	display: block;    
	border: solid 1px #d3d2d2;    

	background-image:
		-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.34, rgb(250,250,250)),
		color-stop(1, rgb(224,224,224)),
		color-stop(1, rgb(237,234,237))
		);

	background-image:
		-moz-linear-gradient(
		center bottom,
		rgb(250,250,250) 34%,
		rgb(224,224,224) 100%,
		rgb(237,234,237) 100%
		);

	color: #09549f ;    
	text-decoration: none;    
	position: absolute;    
	bottom: 25px;    
	left: 25px;    
	padding: 15px 25px 15px 25px;    
	visibility: hidden;    
	width: 270px;
	z-index: 10; 
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	border-radius: 7px ; 
	text-shadow:1px　0 1px rgba(255, 255, 255, 0.9);
	}

a{ 
	text-decoration:none;
	position: relative;	
	}

a:hover,
a:hover:after{ 
	visibility: visible; 
	z-index: 100; 
	}

contentに定型テキストを含めました。
実装↓

かちびと.net

装飾されました。HTMLは変えていません。

雑感

これはこれでなかなか親切じゃないかなとは思います。デザインはもっと工夫できそうですね。背景はcss3のグラデーションを使いましたが、画像を使って工夫すればもっと親切なツールチップも作れるかなと思います。
正直ここまで長くなるならjs使ったほうが良いに決まってますけど、使えない状況なら選択肢になるんじゃないですかね。分かりませんけどｗ

以上、CSSのみでリンク先をツールチップで表示させる方法でした。