[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip

ページのあらゆる要素に簡単に実装できる、シンプルでクールなツールチップのスクリプト「Simpletip」を紹介します。

Simpletip
demo

ツールチップのデザインは、スタイルシートで変更できます。

デモのスタイルシート

.tooltip{
	display: none;
	position: absolute;
	padding: 10px 13px;
	z-index: 2;

	background-color: #f5f5b5;
	border: 1px solid #DECA7E;

	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

ツールチップを表示したい要素には、非表示の要素やtitleに記述するのではなく、スクリプト内に記述します。

デモのスクリプト

<code class="css">にツールチップを表示。

$('code.css').simpletip({
	fixed:false,
	content:'CSS code example'
});

SimpletipはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2009年2月5日