Tooltip效果 http://cceer.xmu.edu.cn/blog/post/tooltip.html

网上tooltip效果有不少,简易实用的不多.比如google的,长的可怕,也让人看不懂.还有一些属于IE only.在jQuery中有一个tooltip效果,还算不错.但个人不是很喜欢,而且还要加个jQuery,无疑,代码长了一些.
下面是之前在蓝色上看到的一个tooltip效果,不错,对它做了一些修改(比如之前只是对链接有tooltip效果,现在对图片也可以有这个效果)加了注释,是深入javascript深入UI学习的一个不错的例子.
当然,你可以在tooltip的基础上加入AJAX效果.(如果是文章发布系统,比较好的是文章会有个简介,AJAX把这部分内容放到tooltip中去.
说明:

原作者:不详(如果有人知道,email我,会及时修改)
修改者:草履虫
联系:caolvchong@gmail.com
转贴请说明上面一段

效果图: 预览地址: http://mmchong.3322.org:81/tooltip/tooltip.html 本机上,有时可能访问不了 使用说明:

在需要的页面引用这段js,或者你把它写入js文件调用,并在window.onload中加入enable_tooltip();即可

范例打包下载: tooltip.rar

view plain copy to clipboard print ?

1. //===============================tooltip效果函数================================   
2. /*--->enableTooltips()  
3.  * 功能:调用tooltip效果  
4.  * 参数:无  
5.  * 返回:无  
6.  */  
7.     function enable_tooltip(){   
8.         var links,i,h;   
9.         //是否支持DOM   
10.         if(!document.getElementById || !document.getElementsByTagName){   
11.             return;   
12.         }   
13.         //添加样式   
14.         add_css();   
15.         h=document.createElement("span");   
16.         h.setAttribute("id","btc");   
17.         h.style.position="absolute";   
18.         document.getElementsByTagName("body")[0].appendChild(h);   
19.         //遍历链接,添加tooltip事件   
20.         for(i=0;i<DOCUMENT.GETELEMENTSBYTAGNAME("A").LENGTH;I++){ } *--- Prepare(document.getElementsByTagName(?img?)[i]); for(i='0;i<document.getElementsByTagName("img").length;i++){' 遍历图片,添加tooltip事件 Prepare(document.getElementsByTagName(?a?)[i]);>Prepare(el)   
21.  * 功能:实现tooltip的显示,删除,透明度等功能   
22.  * 参数:   
23.  *      el:受作用节点   
24.  * 返回:无   
25.  */   
26.     function Prepare(el){   
27.         //变量说明:   
28.             //tooltip:tooltip效果的整体,装载在id为btc的span标签中   
29.             //s:显示链接的title,tooltip的上半部分效果   
30.             //t:title的值   
31.             //b:显示链接的href,tooltip下半部分效果   
32.             //l:链接内容,就是href的值   
33.         var tooltip,t,b,s,l;   
34.         t=el.getAttribute("title");   
35.         if(t==null || t.length==0){   
36.             return;   
37.         }   
38.         //去掉该节点的title属性   
39.         if(el.getAttribute("title")){   
40.             el.removeAttribute("title");   
41.         }   
42.         if(el.getAttribute("alt")){   
43.             el.removeAttribute("alt");   
44.         }   
45.         //创建节点tooltip,标签为span,设置class属性值为tooltip   
46.         tooltip=CreateEl("span","tooltip");   
47.         //创建节点s,标签为span,设置class属性值为top.s节点是用来显示a链接的title内容   
48.         s=CreateEl("span","top");   
49.         s.appendChild(document.createTextNode(t));   
50.         tooltip.appendChild(s);   
51.            
52.         //创建节点b,标签为span,设置class属性值为bottom.b节点是用来显示a的链接的href内容   
53.         b=CreateEl("b","bottom");   
54.         l=el.getAttribute("href") || el.getAttribute("src");   
55.         if(l.length>30) l=l.substr(0,27)+"...";   
56.         b.appendChild(document.createTextNode(l));   
57.         tooltip.appendChild(b);   
58.         //设置透明度   
59.         setOpacity(tooltip);   
60.         el.tooltip=tooltip;   
61.         //节点的鼠标移到上面事件:显示tooltip   
62.         el.οnmοuseοver=showTooltip;   
63.         //节点的鼠标移出事件:移除tooltip   
64.         el.οnmοuseοut=hideTooltip;   
65.         //节点的鼠标在上面移动事件:只要调整位置   
66.         el.οnmοusemοve=Locate;   
67.     }   
68. /*--->add_css()  
69.  * 功能:动态添加样式  
70.  * 参数:无  
71.  * 返回值:无  
72.  */  
73.     function add_css(){   
74.         var l=CreateEl("link");   
75.         l.setAttribute("type","text/css");   
76.         l.setAttribute("rel","stylesheet");   
77.         l.setAttribute("href","css/tooltip.css");   
78.         l.setAttribute("media","screen");   
79.         document.getElementsByTagName("head")[0].appendChild(l);   
80.     }   
81. /*--->CreateEl(t,c)  
82.  * 功能:创建一个标签节点,并设置它的css属性  
83.  * 参数:  
84.  *      t:要创建的标签名  
85.  *      c:要创建的css的class名  
86.  * 返回:创建的节点  
87.  */  
88.     function CreateEl(t,c){   
89.         var x=document.createElement(t);   
90.         x.className=c;   
91.         x.style.display="block";   
92.         return(x);   
93.     }   
94. /*--->setOpacity(el)  
95.  * 功能:设置tooltip的透明度  
96.  * 参数:tooltip当前节点  
97.  * 返回值:无  
98.  */  
99.     function setOpacity(el){   
100.         el.style.filter="alpha(opacity:75)";   
101.         el.style.KHTMLOpacity="0.75";   
102.         el.style.MozOpacity="0.75";   
103.         el.style.opacity="0.75";   
104.     }   
105. /*--->showTooltip(e)  
106.  * 功能:显示tooltip,并设置位置  
107.  * 参数:  
108.  *      e:事件,这里接受a的onmouseover  
109.  * 返回:无  
110.  * 说明:由于是把tooltip节点做为孩子加入btc节点,所以后面删除只要移除tooltip节点即可.  
111.  *      而tooltip是第一个孩子,所以removeChild掉firstChild即可  
112.  */  
113.     function showTooltip(e){   
114.         document.getElementById("btc").appendChild(this.tooltip);   
115.         Locate(e);   
116.     }   
117. /*--->hideTooltip(e)  
118.  * 功能:移除tooltip显示  
119.  * 参数:  
120.  *      e:事件,这里接受a的onmouseout事件  
121.  * 返回:无  
122.  */  
123.     function hideTooltip(e){   
124.         //获取tooltip节点   
125.         var d=document.getElementById("btc");   
126.         if(d.childNodes.length>0) d.removeChild(d.firstChild);   
127.     }   
128. /*--->Locate(e)  
129.  * 功能:设置tooltip的位置  
130.  * 参数:  
131.  *      e:事件,,这里接受a的onmousemove  
132.  *  返回:无  
133.  */  
134.     function Locate(e){   
135.         var posx=0,posy=0;   
136.         if(e==null) e=window.event;   
137.         if(e.pageX || e.pageY){   
138.             posx=e.pageX; posy=e.pageY;   
139.         }else if(e.clientX || e.clientY){   
140.             if(document.documentElement.scrollTop){   
141.                 posx=e.clientX+document.documentElement.scrollLeft;   
142.                 posy=e.clientY+document.documentElement.scrollTop;   
143.             }else{   
144.                 posx=e.clientX+document.body.scrollLeft;   
145.                 posy=e.clientY+document.body.scrollTop;   
146.             }   
147.         }   
148.         document.getElementById("btc").style.top=(posy+10)+"px";   
149.         document.getElementById("btc").style.left=(posx-20)+"px";   
150.     }  

//===============================tooltip效果函数================================
/*--->enableTooltips()
 * 功能:调用tooltip效果
 * 参数:无
 * 返回:无
 */
	function enable_tooltip(){
		var links,i,h;
		//是否支持DOM
		if(!document.getElementById || !document.getElementsByTagName){
			return;
		}
		//添加样式
		add_css();
		h=document.createElement("span");
		h.setAttribute("id","btc");
		h.style.position="absolute";
		document.getElementsByTagName("body")[0].appendChild(h);
		//遍历链接,添加tooltip事件
		for(i=0;iPrepare(el)
 * 功能:实现tooltip的显示,删除,透明度等功能
 * 参数:
 * 		el:受作用节点
 * 返回:无
 */
	function Prepare(el){
		//变量说明:
			//tooltip:tooltip效果的整体,装载在id为btc的span标签中
			//s:显示链接的title,tooltip的上半部分效果
			//t:title的值
			//b:显示链接的href,tooltip下半部分效果
			//l:链接内容,就是href的值
		var tooltip,t,b,s,l;
		t=el.getAttribute("title");
		if(t==null || t.length==0){
			return;
		}
		//去掉该节点的title属性
		if(el.getAttribute("title")){
			el.removeAttribute("title");
		}
		if(el.getAttribute("alt")){
			el.removeAttribute("alt");
		}
		//创建节点tooltip,标签为span,设置class属性值为tooltip
		tooltip=CreateEl("span","tooltip");
		//创建节点s,标签为span,设置class属性值为top.s节点是用来显示a链接的title内容
		s=CreateEl("span","top");
		s.appendChild(document.createTextNode(t));
		tooltip.appendChild(s);
		
		//创建节点b,标签为span,设置class属性值为bottom.b节点是用来显示a的链接的href内容
		b=CreateEl("b","bottom");
		l=el.getAttribute("href") || el.getAttribute("src");
		if(l.length>30) l=l.substr(0,27)+"...";
		b.appendChild(document.createTextNode(l));
		tooltip.appendChild(b);
		//设置透明度
		setOpacity(tooltip);
		el.tooltip=tooltip;
		//节点的鼠标移到上面事件:显示tooltip
		el.οnmοuseοver=showTooltip;
		//节点的鼠标移出事件:移除tooltip
		el.οnmοuseοut=hideTooltip;
		//节点的鼠标在上面移动事件:只要调整位置
		el.οnmοusemοve=Locate;
	}
/*--->add_css()
 * 功能:动态添加样式
 * 参数:无
 * 返回值:无
 */
	function add_css(){
		var l=CreateEl("link");
		l.setAttribute("type","text/css");
		l.setAttribute("rel","stylesheet");
		l.setAttribute("href","css/tooltip.css");
		l.setAttribute("media","screen");
		document.getElementsByTagName("head")[0].appendChild(l);
	}
/*--->CreateEl(t,c)
 * 功能:创建一个标签节点,并设置它的css属性
 * 参数:
 * 		t:要创建的标签名
 * 		c:要创建的css的class名
 * 返回:创建的节点
 */
	function CreateEl(t,c){
		var x=document.createElement(t);
		x.className=c;
		x.style.display="block";
		return(x);
	}
/*--->setOpacity(el)
 * 功能:设置tooltip的透明度
 * 参数:tooltip当前节点
 * 返回值:无
 */
	function setOpacity(el){
		el.style.filter="alpha(opacity:75)";
		el.style.KHTMLOpacity="0.75";
		el.style.MozOpacity="0.75";
		el.style.opacity="0.75";
	}
/*--->showTooltip(e)
 * 功能:显示tooltip,并设置位置
 * 参数:
 * 		e:事件,这里接受a的onmouseover
 * 返回:无
 * 说明:由于是把tooltip节点做为孩子加入btc节点,所以后面删除只要移除tooltip节点即可.
 * 	    而tooltip是第一个孩子,所以removeChild掉firstChild即可
 */
	function showTooltip(e){
		document.getElementById("btc").appendChild(this.tooltip);
		Locate(e);
	}
/*--->hideTooltip(e)
 * 功能:移除tooltip显示
 * 参数:
 * 		e:事件,这里接受a的onmouseout事件
 * 返回:无
 */
	function hideTooltip(e){
		//获取tooltip节点
		var d=document.getElementById("btc");
		if(d.childNodes.length>0) d.removeChild(d.firstChild);
	}
/*--->Locate(e)
 * 功能:设置tooltip的位置
 * 参数:
 * 		e:事件,,这里接受a的onmousemove
 * 	返回:无
 */
	function Locate(e){
		var posx=0,posy=0;
		if(e==null) e=window.event;
		if(e.pageX || e.pageY){
		    posx=e.pageX; posy=e.pageY;
		}else if(e.clientX || e.clientY){
		    if(document.documentElement.scrollTop){
		        posx=e.clientX+document.documentElement.scrollLeft;
		        posy=e.clientY+document.documentElement.scrollTop;
		    }else{
		        posx=e.clientX+document.body.scrollLeft;
		        posy=e.clientY+document.body.scrollTop;
		    }
		}
		document.getElementById("btc").style.top=(posy+10)+"px";
		document.getElementById("btc").style.left=(posx-20)+"px";
	}

代码请以范例下载包中为准

Tags: javascript  tooltip  jQuery