引用自:http://www.cnblogs.com/QLeelulu/archive/2008/03/09/1097368.html
调用本代码需先要引用jquery类文件:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToolTip.aspx.cs" Inherits="FreeProject.ToolTip" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style>
#luluTip
{
word-wrap:break-word; /**//*自动换行,在FF中对英文和数字无效*/
position:absolute;
width:150px;
color: #a00;
background-color:#FFFFCC;
border:1px solid #a00;
padding:10px;
display:none; /**//*我们先不要让它显示*/
}
#luluTip div.triangle /**//*后代选择器,选择ID为"luluTip"中DIV的类为"triangle"的元素*/
{
background:transparent
url('http://www.cnblogs.com/images/cnblogs_com/qleelulu/sj.gif')
no-repeat scroll left top;
position:absolute;
height:17px;
left:20px;
top:-16px;
width:31px;
z-index:999;
}
</style>
<script type="text/javascript" src="JS/jquery-1[1][1].2.1.js"></script>
<script type="text/javascript">
$(function(){
$("[myTip]").hover(function(){
$('<div id="luluTip"><div class="triangle" /></div>')
.insertAfter(this)
.prepend($(this).attr("myTip"));
$(this).mousemove(function(e){
e=e || window.event;
var x=e.pageX-36;
if(x-2<0)
x=2;
if(x+152>document.body.clientWidth)
x=document.body.clientWidth-152;
$("#luluTip").css({"left":x,"top":e.pageY+18,"display":"block"});
});
},function(){
$("#luluTip").remove();
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a myTip="这是要显示的内容!" href="#">测试提示信息</a>
</div>
</form>
</body>
</html>
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
