Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
CSSでツールチップを表示します。 - CodingMania

2011/3/19

CSSでツールチップを表示します。

titleタグを使わずにspanタグでツールチップに表示したい文章を入れておきます。

spanタグは非表示にしておいて、マウスオーバーしたときに表示する。
jQueryバージョンもあります。>>>ツールチップ表示をjQueryでオリジナル化

HTMl

<p>ツールチップ表示の<a href="#" class="tooltip"><span>ここにツールチップテキストをいれる</span>デモリンクはここ</a>です。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>

CSS

/* リンクスタイル設定 */
a.tooltip:link{color:#000;}
a.tooltip:visited{color:#000;}
a.tooltip:hover{color:#FFF; background-color:#690; text-decoration:none; position:relative;}
a.tooltip:active{color:#FFF; background-color:#690; text-decoration:none;}
/* ツールチップスタイル設定 */
a.tooltip span{
	display:none;
}
a.tooltip:hover span{
	display:block;
	position:absolute;
	top:25px;
	left:20px;
	white-space:nowrap;/* 折り返し無し */
	color:#000;
	text-decoration:none;
	line-height:1.2;
	border:#690 solid 2px;
	background-color:#FFC;
	padding:5px;
}