在项目中，我们经常会遇到需要查看数据表中所有字段详细信息的情况，通常我们会把某些必要的字段如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"
            C
            ProviderName="System.Data.SqlClient"
            SelectCommand="SELECT * FROM [authors]">
        </asp:SqlDataSource>

        Web.config配置如下:

<connectionStrings>

<addname="MySqlConnectionString" c />

</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-family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;

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>
好了，终于完成任务了，看一看实际效果吧。





这里有一个问题就是：
           

这样相当难看，请熟悉CSS的朋友给解决一下，谢谢了！



源代码下载：SmartToolTip.zip


原文出处：http://www.cnblogs.com/rubyer/