CSSでTOOL TIP [ Help Balloon ] 編。

CSSでTool Tip。シンプルに書けるやつで。
しかし吹き出しのくちばしをつけるのに非常に苦労をしたのだった。ふう。

update： 12/11/26

まずは基本型。このリンクにマウスオーバーで吹き出しを表示。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

↑これならとっても簡単。

CSS

/*----- Easy Tool Tips　< BASIC > -----*/
.BASIC a {color:#c30;}
.BASIC a:hover {
	background:#ffffff;
	text-decoration:none;
	border-bottom:2px #c30 dotted;} /*BG color is a must for IE6*/ 
.BASIC a.tooltip span {
	display:none;
	width:auto;} 
.BASIC a.tooltip:hover span{
	display:inline;
	position:absolute;
	padding:1em;
	background:#eee;
	border:1px solid #cccccc;
	color:#6c6c6c;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
 	-khtml-border-radius:5px; 
 	border-radius:5px;
	z-index:100;
} 

html

<p class="BASIC">まずは基本型。この<a href="#" class="tooltip">リンクにマウスオーバーで吹き出しを表示。<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</span></a></p>

これに下のようなくちばしをつけたいのだ。

で、いろいろやったがついにできたよん〜

たとえばこんなフォームでは、<span></span>で囲んで横並び。

<p></p>だとこんな感じな縦並び。

Help 入山・下山口では、携帯電話の電波が入りにくいことがあります。電波の入りやすい場所で連絡をしていただいてかまいません。（例：自宅を出るとき、最寄りの駅、など）計画時にはこの点を考慮して時間を記入して下さい。

？ 入山・下山口では、携帯電話の電波が入りにくいことがあります。電波の入りやすい場所で連絡をしていただいてかまいません。（例：自宅を出るとき、最寄りの駅、など）計画時にはこの点を考慮して時間を記入して下さい。

ソースは複雑なのでソースを見よ、って感じかな。そのうちきれいに成形するカモノハシ。