学会做一个简易的 Tooltip 效果,基于 MooTools or jQuery

为什么实用tooltip

我们都知道浏览器已经自带了超链接提示,只需要我们在链接中加入title属性就可以了,不过大多数的标签都有title属性。对于图片IMG标签,我们经常关注的是它的alt和title属性。
alt是替换文字的意思,它是为了给那些不能看到你文档中图像的浏览者提供文字说明,因此也是WEB标准实战的一个细节。title属性是对图片的说明和额外补充,如果需要时它会在鼠标经过图片时出现文字提示。title属性的优先级高于alt,在WEB标准实战中,图片IMG标签必须加上alt属性,
我的意见是alt和title两个属性,在IMG上都应该加上,通过前辈们的web实战,分析得出title属性添加到img主要的目的是为了UEO,而alt属性添加到img主要的目的是为了SEO。

注意:alt 在IE浏览器中还起到了title的作用——鼠标经过时的也有文字提示的作用。IE浏览器给了大家一个误导,在IE中alt会变成文字提示是因为IE不标准。这一点Firefox做的就比较好。

然而,超链接和图片的提示效果的响应速度是非常慢的,再说提示效果的外观也不美丽,考虑到良好的人机交互,需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除<a>标签中的title提示效果,自己动手做一个类似功能的提示。

再次声明,我们的目的是实现Javascript动态文字或图片提示效果,以增强页面的交互性。如果我们用市面比较流行的javascript 库来实现此效果是非常容易的,如果你为了快速开发的话,那就用它们提供的tooltip插件吧!不仅可以实现文字和图片提示条功能,还可以动态加载其它页面文件,并且可以定制丰富tooltip内容和效果,使用起来也比较简单。

我这里是提倡由简入难,知道原理,一点点的消化。。。。。。

一个简易的tooltip提示效果

首先,在空白页面上,添加两个普通的超链接和两个带有class的超链接。

The HTML :

1
2
3
4
5
<h1>Easy Tooltip Using MooTools or jQuery </h1>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1111111111111111111111.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示222222222222222222222.</a></p>
<p><a href="#"  title="这是自带的超链接提示1.">自带提示1111111111111111111111.</a></p>
<p><a href="#"  title="这是自带的超链接提示2.">自带提示222222222222222222222.</a></p>

然后为class是tooltip的超链接添加mouseover和mouseout事件。

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
$$('a.tooltip').addEvents({
	'mouseover'	:function(){
	//显示 TIELE	
 
	},
	'mouseout':function(){
    //隐藏TITLE
 
	}
});

实现此效果的具体思路如下:

一.当鼠标滑入超链接范围。

  1. 创建一个<p>元素,<p>元素的内容为title属性的值。
  2. 将创建好的元素添加到文档中。
  3. 为它设置X坐标和Y坐标,使它显示在鼠标位置的旁边。

二.当鼠标滑出超链接范围时,移除<div>元素。

根据分析的思路,写出如下的MooTools JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$$('a.tooltip').addEvents({
	'mouseover'	:function(event){
       //创建&lt;p&gt;元素
		var tip=new Element('p',{
			'id':'tooltip',					
			'html':	this.title,
           //设置x坐标和y坐标,并且显示
			'styles':{
				 'top':(event.page.y)+'px',
				 'left':(event.page.x)+'px',
                'display':'block'
			}
		});
        //将创建好的元素添加到文档中
		$(document.body).grab(tip);	
	},
	'mouseout':function(){
	    $$('#tooltip').dispose(); //移除
	}
});

demo1

演示:Demo-1

通过运行示例,此时我们发现两个问题:

  1. 当鼠标滑到链接区域时,<a>标签的title属性的提示也会出现。
  2. 自制的提示与鼠标的距离太近(设置的X坐标和Y坐标的问题),有的时候会引起无法提示的问题(鼠标焦点变化引起mouseout事件)。

根据上面我们发现的问题,我们一一解决:

1.移除<a>标签中的title提示功能:

当鼠标滑入时,给对象添加一个新的属性,并把title的值给这个属性,然后清空属性title的值。

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'mouseover':function(event){  
   this.myTitle = this.title;
   this.title = "";	
   //创建&lt;p&gt;元素
   var tip=new Element('p',{
		'id':'tooltip',					
		'html':	this.title,
        //设置x坐标和y坐标,并且显示
	    'styles':{
			'top':(event.page.y)+'px',
			'left':(event.page.x)+'px',
           'display':'block'
        }
  });
}

当鼠标滑出时,再把对象的 myTitle 属性的值又赋给title。

The MooTools JavaScript :

1
2
3
4
'mouseout':function(){
	this.title = this.myTitle;
	$$('#tooltip').dispose(); //移除
}

注意:为什么当鼠标滑出时,要把属性值又赋给属性title呢?

因为当鼠标滑出时,需要考虑再次滑入时的属性title值,如果不将myTitle的值重新赋给title属性,当再次滑入时,title的值就是空的了。

为了解决第二个问题,需要重新设置提示元素的top和left属性的值,代码如下:

The MooTools JavaScript :

1
2
3
4
5
6
var x = 10;
var y = 20;	
$$('#tooltip').setStyles({
	'top':(event.page.y + y)+'px',
	'left':(event.page.x + x)+'px'				
});

好了,遇到的两个问题我们已解决了,那就看一下完整的代码吧,代码如下:

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
this.tooltip = function(){	
   var x = 10;
   var y = 20;	
   $$('a.tooltip').addEvents({
	'mouseover'	:function(event){
		this.myTitle = this.title;
		this.title = "";	
		var tip=new Element('p',{
			'id':'tooltip'	,					
			'html':	this.myTitle,
           //设置x坐标和y坐标
			'styles':{
				 'top':(event.page.y+y)+'px',
				 'left':(event.page.x+x)+'px',
				 'display':'block'
			},
 
		 });
        //将创建好的元素添加到文档中
		 $(document.body).grab(tip);	
	},
	'mouseout':function(){
		 this.title = this.myTitle;
		 $$('#tooltip').dispose(); //移除
	}
 });       
};
//调用tooltip
window.addEvent('domready',function(){
   tooltip();																
});

此时,您看到的效果,已经没有问题了,但是当鼠标在超链接上移动时,提示效果并不会跟着鼠标移动。如果需要提示跟着鼠标一起移动的话,可以为超链接加上一个mousemove事件。

The MooTools JavaScript:

1
2
3
4
5
6
'mousemove':function(event){
	$$('#tooltip').setStyles({
		'top':(event.page.y + y)+'px',
		'left':(event.page.x + x)+'px'				
	});	
}

这样,当鼠标在超链接上移动时,提示效果也会跟着鼠标一起移动了。

好了,到此已经把一个完整的提示效果做完了,那我们就看一下完整的MooTools代码吧!

The CSS :

1
2
3
4
5
6
7
8
9
/* tooltip */
#tooltip{
	border:1px solid #333;
	padding:1px;
	color:#333;
	display:none;
	position: absolute;
	background-color: #FF9;
}

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
this.tooltip = function(){	
   var x = 10;
   var y = 20;	
   $$('a.tooltip').addEvents({
	'mouseover'	:function(event){
		this.myTitle = this.title;
		this.title = "";	
		var tip=new Element('p',{
			'id':'tooltip'	,					
			'html':	this.myTitle,
           //设置x坐标和y坐标
			'styles':{
				 'top':(event.page.y+y)+'px',
				 'left':(event.page.x+x)+'px',
				 'display':'block'
			},
 
		 });
        //将创建好的元素添加到文档中
		 $(document.body).grab(tip);	
	},
	'mouseout':function(){
		 this.title = this.myTitle;
		 $$('#tooltip').dispose(); //移除
	},
	'mousemove':function(event){
		$$('#tooltip').setStyles({
		   'top':(event.page.y + y)+'px',
		   'left':(event.page.x + x)+'px'				
	    });	
	}	
  });       
};
window.addEvent('domready',function(){
   tooltip();																
});

The jQuery JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
    var x = 10;  
	var y = 20;
	$("a.tooltip").mouseover(function(e){
       	this.myTitle = this.title;
		this.title = "";	
	    var tooltip = "<p id='tooltip'>"+ this.myTitle +"<\/p>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标,并且显示
    }).mouseout(function(){		
		this.title = this.myTitle;
		$("#tooltip").remove();   //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			});
	});
})

演示:超链接提示效果

举一反三,图片提示效果的实现

The MooTools JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
this.tooltip = function(){	
      x = 10;
	  y = 20;
      $$('a.tooltip').addEvents({
		'mouseover'	:function(event){
		    this.myTitle = this.title;
		    this.title = "";	
			var imgTitle = (this.myTitle != "") ? "<br/>" + this.myTitle : "";
			var tooltip_inner = "<img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle; 
			var tooltip=new Element('p',{
				'id':'tooltip'	,					
				'html':tooltip_inner,
				'align':'center',
				'styles':{
					'top':(event.page.y + y)+'px',
					'left':(event.page.x + x)+'px',	
					'display':'block'/*,
					'opacity':1			*/
			    }
		    });
			$(document.body).grab(tooltip);
 
		},
		'mouseout':function(){
		  //隐藏TITLE
		   this.title = this.myTitle;
		   $$('#tooltip').dispose(); 
		},
		'mousemove':function(event){
			$$('#tooltip').setStyles({
		    'top':(event.page.y + y)+'px',
			'left':(event.page.x + x)+'px'
 
		   });	
 
	    }		 
	});
 
};
 
window.addEvent('domready',function(){
   tooltip();																
});

The jQuery JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function(){
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";	
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<p id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/p>"; //创建p 元素
		$("body").append(tooltip);	//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标,并且显示
    }).mouseout(function(){
		this.title = this.myTitle;	
		$("#tooltip").remove();	 //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

演示:图片提示效果

以上,就是图片提示效果的完整代码,当鼠标经过图片,图片就会出现预览的大图,并且大图的下面还有介绍文字。

应用jQuery的hover()效果实现的tooltips提示效果

下面的实例主要应用了jQuery的hover()效果,hover()效果是一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。它接受了两个函数,代表鼠标的mouseover 和 mouseout事件。

The jQuery JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
 
// starting the script on page load
$(document).ready(function(){
	tooltip();
});

好极了,这就是jQuery的灵活性。

下载:MooTools tooltip

下载:jQuery tooltip

高级篇,使用插件实现tooltip提示效果

jQuery库和MooTools库都有丰富的插件,如果我们使用了插件,那看到的就不是我们在上面实现的“简易的tooltip效果”了。

它能为我们提供更佳的效果,更多功能。

我在这里推荐的是:Sexy ToolTips

该插件支持jQuery库和MooTools库,并且可以定制外观,支持所用的主流的浏览器。

Sexy Tooltips te permite crear tooltips realmente sexys. Reemplaza esos feos, aburridos y amarillos tooltips del navegador, por unos con toda la onda!

  • Estilo: Puedes elegir entre varios estilos.
  • Posición: Método de posicionamiento inteligente.
  • Compatibilidad: Trabaja en todos los navegadores modernos.

 

 

演示:demo de Sexy Tooltips

下载: http://sexy-tooltips.googlecode.com/files/sexy-tooltips-1.1.zip

站点统计