利用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-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