JAVASCRIPT 提示信息 主要是使用了获取控件的位置进行定位
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DCS_SubmitNewRequest.aspx.cs"
Inherits="BAF.DCS.Web.DCS_SubmitNewRequest" %>
<!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>
<link href="http://www.cnblogs.com/Style/Style.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Script/Script.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowToolTip(objTitle,objText)
{
var objToolTip= document.getElementById('toolTip');
var objToolTipText=document.getElementById(objText);
objToolTip.innerText=objToolTipText.innerText;
objToolTip.style.display='block';
objToolTip.style.pixelLeft=getL(objTitle);
objToolTip.style.pixelTop=getT(objTitle)+objTitle.offsetHeight;
}
function ShowToolTips()
{
var objToolTip= document.getElementById("toolTip");
objToolTip.style.display='block';
}
function Hidden()
{
var objToolTip= document.getElementById("toolTip");
objToolTip.style.display='none';
}
function getL(e)
{
var l=e.offsetLeft;
while(e=e.offsetParent)
{
l+=e.offsetLeft;
}
return l;
}
function getT(e)
{
var t=e.offsetTop;
while(e=e.offsetParent)
{
t+=e.offsetTop;
}
return t;
}
</script>
<style>
.lblCss
{
border: solid 1px #81A5D0;
background-color: White;
padding-top: 12px;
padding-left: 30px;
}
.gv
{
border: 0px;
margin-top: 0px;
}
.promptDiv
{
border: solid 1px #D1CDC5;
width: 300px;
height: 70px;
position: absolute;
display: none;
background-color: #F6F5F3;
padding: 5px;
overflow-y: auto;
}
</style>
</head>
<body>
<form id="frmMain" runat="server">
<table style="width: 99%" cellpadding="5px" cellspacing="0" border="0">
<tr>
<td>
<!-- 布局用-->
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 20%">
请选择您需要的数据变更类别<br />
<br />
<asp:Label ID="lblTitle" runat="server" Height="24" Width="110" Text="数据变更请求" Font-Bold="true"
CssClass="lblCss"></asp:Label>
<table cellpadding="0" cellspacing="0" width="100%" style="border: solid 1px #81A5D0;
margin-top: 0px;">
<tr>
<td>
<asp:DataList ID="dlCratGoryType" Width="100%" runat="server" RepeatColumns="2" DataKeyField="Value"
OnItemDataBound="dlCratGoryType_ItemDataBound">
<ItemStyle Width="50%" VerticalAlign="Top" />
<ItemTemplate>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 15%;">
<img src="Images/p1.jpg" />
</td>
<td style="font-weight: bold; width: 75%;">
<%# Eval("Text") %>
</td>
</tr>
<tr>
<td>
</td>
<td style="padding-top: 0px;">
<asp:GridView ID="gvList" runat="server" AutoGenerateColumns="false" BorderWidth="0px"
ShowHeader="false" DataKeyNames="CATEGORY_ID" Width="100%" OnRowDataBound="gvList_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="操作" ItemStyle-Width="15%">
<ItemStyle HorizontalAlign="left" Height="20px" Width="15%" Wrap="False" />
<ItemTemplate>
<div style="width: 100%; margin: 0px;" onmouseout="Hidden()" onmouseover="ShowToolTip(this,'<%# "div"+Eval("CATEGORY_ID").ToString()%>')">
<asp:HyperLink ID="hlk_url" Style="cursor: pointer;" ForeColor="#2277B8" Font-Underline="true"
runat="server"><%# Eval("CATEGORY_NAME") %></asp:HyperLink>
</div>
<div style="display: none;" id='<%# "div"+Eval("CATEGORY_ID").ToString()%>'>
<%# Eval("CATEGORY_TIPS")%></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="promptDiv" id="toolTip" onmouseover="ShowToolTips();" onmouseout="Hidden();">
</div>
</form>
</body>
</html>