利用div+css在GridView模版列打造可定制的ToolTip风格

在项目中，我们经常会遇到需要查看数据表中所有字段详细信息的情况，通常我们会把某些必要的字段如ID等显示出来，然后把其它字段汇总放到DetailView或者另一个页面，然后提供一个“查看详细信息”的LinkButton，抑或是利用脚本弹出另一个Web窗口。这些做法都稍显蹩脚，如果只是为“查看详细信息”而查看详细信息（额，有些拗口），我们还有更好的解决办法，利用div+css来达到类似ToolTip的效果。
众所周知，一些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>

好了，终于完成任务了，看一看实际效果吧。



这里有一个问题就是：