Easy CSS Tooltipの使い方

下記ページの｢Download this Script｣の「Easy CSS Tooltip」よりファイル1式をダウンロード。
Easy CSS Tooltip
ダウンロードしたファイルを任意の場所にコピー。

動作させるファイル（サンプルではindex.html）にコードを記述。
＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
・head部分にcssファイルを読み込ませるためのコードを記述。

<head>
<!--css部分を外部化したファイル-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

サンプルのcssコード（サンプルのcssは改変しています）

/*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	font: 75% Verdana, Arial;
	color: #333;
	background: #fff
}
#container {
	width: 100px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからEasy CSS Tooltipの設定*/
a:hover {
	background: #ffffff;
	text-decoration: none;
	cursor: default;
} /*BG color is a must for IE6*/
a.tooltip span {
	display: none;
	padding: 5px 5px;
	margin-left: 8px;
	width: 130px;
}
a.tooltip:hover span {
	display: inline;
	position: absolute;
	border: 1px solid #cccccc;
	background: #ffffff;
	color: #6c6c6c;
}

サンプルのhtmlコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Easy CSS Tooltip</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div id="container"> Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a> </div>

</body>
</html>

ファイル1式をサーバーにアップロードして設置完了。