自定义链接提示



采用不同的方法触发页面浮动提示框，通过鼠标滑过触发浮动提示框

1、使用title属性

在默认状态下可以使用元素的title属性实现链接提示效果     HTML title

title 属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）

[html] view plain copy print ?

1. <button title="点击查看详细信息">按钮</button>  

<button title="点击查看详细信息">按钮</button>

实际效果如下

       

虽然能够实现链接提示效果，但是实际应用中需要更加美观或者与页面相搭配的效果。

2、纯CSS实现

demo效果如下，鼠标滑动，显示提示信息。

        

HTML代码：

[html] view plain copy print ?

1. <a href="#">按钮  
2.     <span class="tipTop-demo">点击查看详细信息</span>  
3. </a>   

<a href="#">按钮
    <span class="tipTop-demo">点击查看详细信息</span>
</a> 

CSS代码：

[css] view plain copy print ?

1. a{  
2.     text-decoration: none;  
3.     width: 100px;  
4.     height: 30px;  
5.     line-height: 30px;  
6.     text-align: center;  
7.     background-color: #ffffff;  
8.     border: 1px solid #cccccc;  
9.     border-radius: 5px;  
10.     position: relative;  
11.     display: inline-block;  
12.     color: #000；  
13. }  
14. .tipTop-demo{  
15.     display: none;  
16. }  
17. a:hover .tipTop-demo{  
18.     display: block;  
19.     width: 100px;  
20.     height: 30px;  
21.     background-color: #1abc9c;  
22.     line-height: 30px;  
23.     text-align: center;  
24.     position: absolute;  
25.     left: 80px;  
26.     top: 40px;  
27.     color: #FFFFFF;  
28.     font-size: 13px;  
29.     padding: 0 5px;  
30. }  

a{
    text-decoration: none;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    color: #000；
}
.tipTop-demo{
    display: none;
}
a:hover .tipTop-demo{
    display: block;
    width: 100px;
    height: 30px;
    background-color: #1abc9c;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 80px;
    top: 40px;
    color: #FFFFFF;
    font-size: 13px;
    padding: 0 5px;
}

3、jquery鼠标移动特效

demo效果如下，鼠标滑动，显示提示信息

提示信息追随鼠标的移动，提示信息内容与按钮文本一致

          
HTML代码：

[html] view plain copy print ?

1. <a href="#">按钮</a>   

<a href="#">按钮</a> 

Js代码：

[javascript] view plain copy print ?

1.  $("a").live('mouseover', function(e) {  
2.        _text = $(this).text();   
3.        _tooltip = "<div id='tipTop-demo'><span> "+_text+"</span></div>";  
4.             $("body").append(_tooltip);    
5.             $("#tipTop-demo").show();  
6.        $("#tipTop-demo")  
7.        .css({  
8.            "top": (e.pageY+10) + "px",  
9.            "left":  (e.pageX +10) + "px"  
10.       }).show("fast");      
11.  });  
12.    
13. $("a").live('mouseout', function(e) {  
14.      $("#tipTop-demo").remove();  
15. });  
16.   
17. $("a").live('mousemove', function(e) {  
18.      $("#tipTop-demo").css({  
19.            "top": (e.pageY+10 ) + "px",  
20.            "left":  (e.pageX+10)  + "px"  
21.       }).show();      
22. });  

  $("a").live('mouseover', function(e) {
		   _text = $(this).text(); 
		   _tooltip = "<div id='tipTop-demo'><span> "+_text+"</span></div>";
		   		$("body").append(_tooltip);  
		   		$("#tipTop-demo").show();
		   $("#tipTop-demo")
		   .css({
			   "top": (e.pageY+10) + "px",
			   "left":  (e.pageX +10) + "px"
		  }).show("fast");    
	 });
	 
	$("a").live('mouseout', function(e) {
		 $("#tipTop-demo").remove();
	});

	$("a").live('mousemove', function(e) {
		 $("#tipTop-demo").css({
			   "top": (e.pageY+10 ) + "px",
			   "left":  (e.pageX+10)  + "px"
		  }).show();    
	});

*_text可以修改为固定值

CSS代码：

a的style与之前例子的a{}一致

[css] view plain copy print ?

1. #tipTop-demo{  
2.     position: absolute;  
3.     background-color: #44cacb;  
4.     padding: 0 5px;  
5.     color: #fff;  
6.     display: none;  
7.     z-index: 9998;  
8.     height: 30px;  
9.     line-height: 30px;  
10.     width: 100px;  
11.     text-align: center;  
12. }  

#tipTop-demo{
	position: absolute;
	background-color: #44cacb;
	padding: 0 5px;
	color: #fff;
	display: none;
	z-index: 9998;
	height: 30px;
	line-height: 30px;
	width: 100px;
	text-align: center;
}

通过以上方式，可以生成同页面效果相搭配的tiptop提示信息。也可以加入图片、淡入淡出等效果，丰富特效。

本文转载于：http://blog.csdn.net/ld_____/article/details/47777997