众所周知，一些HTML元素或者ASP.NET控件都有一个叫做ToolTip的属性。这个属性主要是在鼠标移上的时候显示一些提示和描述信息。不幸的是，它不能像InnerHtml属性一样内嵌HTML代码。比如：
< asp:Image ID="Image1" ImageUrl="~/images/more.gif" ToolTip="< b>抗震救灾 众志成城< /b>" runat="server" />
< asp:Label ID="Label2" runat="server" Text="< b>抗震救灾 众志成城< /b>">< /asp:Label>
运行效果如图：
并没有达到我们预期的效果，好了，下面我们利用div+css在GridView模板内达到我们想要的效果。
首先，我们添加一个数据源控件。
< asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="< %$ ConnectionStrings:MySqlConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT * FROM [authors]">
< /asp:SqlDataSource>
Web.config配置如下:
< connectionStrings>
< add name="MySqlConnectionString" connectionString="Data Source=.\sqlexpress;AttachDBFilename=|DataDirectory|pubs.mdf;Integrated Security=True" />
< /connectionStrings>
再添加一个GridView
< asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="au_id"
DataSourceID="SqlDataSource1" AllowPaging="True">
< Columns>
< asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
< asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
< asp:TemplateField HeaderText="au_fname" SortExpression="au_fname">
< ItemTemplate>
< %--想要添加的代码--%>
< /ItemTemplate>
< /asp:TemplateField>
< /Columns>
< /asp:GridView>
Pubs数据库中的authors表有很多字段，我们只在Gridview里面显示前三个，之后，我们重点在au_fname模板列上做文章。
我们要达到这样的效果：每一行的au_fname后面都有一个小图片，鼠标移上时就弹出tooltip，里面有我们想要的详细信息。
首先，我们需要一个总的div容器。
< ItemTemplate>
< div>
< /div>
< /ItemTemplate>
接着绑定要显示的字段：
< ItemTemplate>
< div>
< asp:Label ID="Label1" runat="server" Text='< %# Bind("au_fname") %>'>< /asp:Label>
< /div>
< /ItemTemplate>
接着我们再添加一个div，这个div的作用十分重要，不可或缺，它主要是协调和Label1的布局（display:inline）并且框定tooltip的位置(position:relative)，使tooltip不至于在页面上“乱跑”。
< ItemTemplate>
< div>
< asp:Label ID="Label1" runat="server" Text='< %# Bind("au_fname") %>'>< /asp:Label>
< div style="display:inline; position:relative;z-index:1000">
< img src="images/more.gif" alt="" />
< div id="div< %# Eval("au_id") %>" class="tooltip">
< strong>phone< /strong>:< %# Eval("phone")%>< br />
< strong>address< /strong>:< %# Eval("address")%>< br />
< strong>city< /strong>:< %# Eval("city")%>< br />
< strong>state< /strong>:< %# Eval("state")%>< br />
< strong>zip< /strong>:< %# Eval("zip")%>< br />
< strong>contract< /strong>:< asp:CheckBox ID="CheckBox1" Checked='< %#Convert.ToBoolean(Eval("contract").ToString())%>' runat="server" />
< /div>
< /div>
< /div>
< /ItemTemplate>
Id为div< %# Eval("au_id") %>的div就是我们要的类似tooltip的容器，它是可定制的，也就是说，它可以是相当复杂的，你可以往里面添加任何你想要的HTML代码。
编辑模板列，使其对齐：
下一步，我们要利用CSS代码来控制这个div，使其状态在初始时隐藏，当img对象的onmousemove事件发生时显示，onmouseout事件发生时又隐藏。
下面是CSS代码和Javascript脚本，都很简单。
< style type="text/css">
.tooltip
{
display: none;
position: absolute;
z-index: 1001;
left: 10px;
top: 15px;
width: 170px;
font-size: 0.8em;
padding: 3px;
border: dotted 1px;
background-color: InfoBackground
}
< /style>
< script type="text/javascript">
function showPanel(divName) {
var ctl = window.document.getElementById(divName);
ctl.style.display = 'block';
ctl.scrollIntoView();
}
function hidePanel(divName) {
var ct2 = window.document.getElementById(divName);
ct2.style.display = 'none';
}
< /script>
好了，终于完成任务了，看一看实际效果吧。
这里有一个问题就是：
上面的图有点问题：
解决办法：
1
< %@ Page Language="C#" %>
2
3< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
6< html xmlns="http://www.w3.org/1999/xhtml" >
7< head id="Head1" runat="server">
8 < title>Smart ToolTip Demo< /title>
9 < link href="Style.css" rel="stylesheet" type="text/css" />
10 < script type="text/javascript">
11
function showPanel(item,divName) 
{
12
var ctl = window.document.getElementById(divName);
13 ctl.style.display = 'block';
14 hideImages();
15 item.style.display = 'block'
16 //ctl.scrollIntoView();
17
}
18 function hidePanel(item,divName) {
19 var ct2 = window.document.getElementById(divName);
20 ct2.style.display = 'none';
21 showImages();
22 }
23
24 function showImages()
25 {
26 var timgs = document.getElementsByName ("timg");
27 for(i=0; i< timgs.length; i++)
28
{
29 timgs[i].style.display='block';
30
}
31 }
32
33 function hideImages()
34 {
35 var timgs = document.getElementsByName ("timg");
36 for(i=0; i< timgs.length; i++)
37 {
38 timgs[i].style.display='none';
39 }
40 }
41 < /script>
42< /head>
43< body>
44 < form id="form1" runat="server">
45 < asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="au_id"
46 DataSourceID="SqlDataSource1" AllowPaging="True">
47 < Columns>
48 < asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
49 < asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
50 < asp:TemplateField HeaderText="au_fname" SortExpression="au_fname">
51 < ItemTemplate>
52 < div>
53 < asp:Label ID="Label1" runat="server" Text=''>asp:Label>
54 < div style="display:inline ; position: absolute; z-index:10">
55 < img src="images/more.gif" width="11" height="9" onmouseover="showPanel(this,'div');"
56 onmouseout="hidePanel(this,'div');" alt="" style="z-index:10" name="timg"/>
57 < div id="div" class="tooltip" style="z-index:20">
58 < strong>电话strong>:<br />
59 < strong>地址strong>:<br />
60 < strong>城市strong>:<br />
61 < strong>statestrong>:<br />
62 < strong>zipstrong>:<br />
63 < strong>contractstrong>:<asp:CheckBox ID="CheckBox1" Checked='' runat="server" />
64 < /div>
65 < /div>
66 < /div>
67 < /ItemTemplate>
68 < /asp:TemplateField>
69 Columns>
70 asp:GridView>
71 < asp:SqlDataSource
72 ID="SqlDataSource1"
73 runat="server"
74 ConnectionString=""
75 ProviderName="System.Data.SqlClient"
76 SelectCommand="SELECT * FROM [authors]">
77 asp:SqlDataSource>
78 form>
79body>
80html>
发表于 @ 2008年05月23日 00:29:56|评论(loading...)|编辑