刚做完成公司项目，剩下的时间来总结下项目所用到的技术要点：
1.tooltip应用：实现的效果为鼠标经过有提示信息，这个和链接<a href="xxx" title="xxx' >xx</a>
属性类似。
2.下面介绍步骤：
???? 2.1 导入jquery插件 和tooltip插件（大家可以上网下载）
???? 2.2 调用tooltip的方法
3.代码如下：
????注意：导入js的顺序 先导入jquery的包再后为tooltip包。
<%@ page language="java" contentType="text/html; charset=UTF-8"
??? pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery tooltip test</title>
<link href="<%=request.getContextPath()%>/css/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.tooltip.js"></script>
<script type="text/javascript">
$(function() {
????
??? $('#right a').tooltip({
??? ??? track: true,
??? ??? delay: 800,
??? ??? showURL: false,
??? ??? extraClass: "right",
??? ??? fade: true,
??? ??? positionLeft: false,
??? ??? opacity: 0.3,??
??? ??? top: -15,?
??? ??? left: 5 ,
??? ??? bodyHandler: function() {?
??????? ??? return $("<img/>").attr("src", "images/163/yeahlogo_middle.gif"); //可以自己写图片的位置
??? ??? }?
??? });
??? $("map *").tooltip({ positionLeft: true });
});
??? ??? ?
</script>
</head>
<body>
??? ??? <fieldset>
??? ??? ??? <legend>Testing repositioning at viewport borders</legend>
??? ??? ??? <p id="right">
??? ??? ??? ??? Tooltip with fixed width<br/>
??? ??? ??? ??? <a title="Short title" href="http://goggle">Google me!</a><br/>
??? ??? ??? ??? <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
??? ??? ??? </p>
??? ??? ??? <p id="right2">
??? ??? ??? ??? Tooltip width auto width<br/>
??? ??? ??? ??? <a title="Short title" href="http://goggle">Google me!</a><br/>
??? ??? ??? ??? <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
??? ??? ??? </p>
??? ??? ??? <h3>Code</h3>
??? ??? ??? <pre><code class="mix"></code></pre>
??? ??? </fieldset>
??? ????
??? ????
??? ??? <fieldset>
??? ??? <legend>Image map with tooltips.</legend>
????
??? ??? <img id="map" src="images/163/karte.png" width="345" height="312" border="0" usemap="#Landkarte">
??? ??? <map name="Landkarte">
??? ??? ? <area shape="rect" coords="11,10,59,29"
??? ??? ??????? href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
??? ??? ? <area shape="rect" coords="42,36,96,57"
??? ??? ??????? href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
??? ??? ? <area shape="rect" coords="42,59,78,80"
??? ??? ??????? href="http://www.mainz.de/" alt="Mainz" title="Mainz">
??? ??? ? <area shape="rect" coords="100,26,152,58"
??? ??? ??????? href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
??? ??? ? <area shape="rect" coords="27,113,93,134"
??? ??? ??????? href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
??? ??? ? <area shape="rect" coords="100,138,163,159"
??? ??? ??????? href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
??? ??? ? <area shape="rect" coords="207,77,266,101"
??? ??? ??????? href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg">
??? ??? ? <area shape="rect" coords="282,62,344,85"
??? ??? ??????? href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
??? ??? ? <area shape="rect" coords="255,132,316,150"
??? ??? ??????? href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg">
??? ??? ? <area shape="rect" coords="78,182,132,200"
??? ??? ??????? href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
??? ??? ? <area shape="rect" coords="142,169,200,193"
??? ??? ??????? href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
??? ??? ? <area shape="rect" coords="140,209,198,230"
??? ??? ??????? href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
??? ??? ? <area shape="rect" coords="187,263,222,281"
??? ??? ??????? href="http://www.ulm.de/" alt="Ulm" title="Ulm">
??? ??? ? <area shape="rect" coords="249,278,304,297"
??? ??? ??????? href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
??? ??? ? <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
??? ??? ??????? href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
??? ??? </map>
??? </fieldset>
????
</body>
</html>
?
?
转载：http://blog.csdn.net/wwwyuanliang10000/article/details/5683605