ツールチップを表示する

jQuery JavaScript 
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
		$('.tips').tooltip({
			top: 5,
			left: 5,
			showURL: false,
			showBody: ' - '
		});
	});
//]]>
</script>
<style type="text/css">
ul li {
	list-style:circle inside;
	padding:5px 0 5px 20px;
}
#tooltip {
	color:#fff;
	position: absolute;
	font-size:0.9em;
	border: 1px #203744 solid;
	background-color: #5b7e91;
	padding: 0 15px;
	opacity: 0.9;
}
#tooltip h3 {
	font-weight:bold;
	margin:10px 0 5px 0;
}
#tooltip div.body {
	margin:0 0 15px 0;
}
</style>
</head>
<body>
<ul>
	<li><a href="#" class="tips" title="HTML - HyperText Markup Language">HTML</a></li>
	<li><a href="#" class="tips" title="CSS - Cascading Style Sheet">CSS</a></li>
	<li><a href="#" class="tips" title="JPEG - Joint Photographic Experts Group">JPEG</a></li>
	<li><a href="#" class="tips" title="GIF - Graphics Interchange Format">GIF</a></li>
	<li><a href="#" class="tips" title="PHP - Portable Network Graphics">PHP</a></li>
</ul>
</body>
</html>