CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Code Snippets \ MooTools \ Tutorials \ MooTools \ Code Snippets \ jQuery \ Tutorials \ jQuery

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

Posted on: in MooTools, MooTools, jQuery, jQuery By:
Rainbow
3

为什么实用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

Responses 3 Comments. Add Comment

  1. scofier 说：
    2010/07/26于18:52

    感觉出神入化一般，mootools我实在还是没搞明白，能够得到老大的qq么（我的qq是：799702824）？ 想和你一起交流jquery & mootools 。

    回复

Leave a Comment