Click here to Skip to main content
15,861,172 members
Articles / Programming Languages / C# 4.0

Using the jQuery Tooltip Plugin in a GridView

Rate me:
Please Sign up or sign in to vote.
4.68/5 (14 votes)
9 Aug 2011CPOL2 min read 67.5K   4.5K   44   8
You want a little pop-up window to show additional information when you hover over a field on the GridView. The example below shows information about the respective related table (foreign key) when you hover over the link.

Introduction

You want a little pop-up window to show additional information when you hover over a field on the GridView. The example below shows information about the respective related table (foreign key) when you hover over the link.

The Solution

Simple. We can use the jQuery tooltip plug-in to show additional information. The jQuery tooltip plug-in we're going to use can be found here. And of course you will need the jQuery framework found here. All the needed scripts are already in the "Code to Download" below.

Minor details: This example uses the (Microsoft) Northwind database's Product table. The GridView web control gets the data via an ObjectDataSource web control. The ObjectDataSource gets the data (SelectMethod) through a strongly-typed middle-tier object which encapsulates a data-tier object that calls on a Stored Procedure. You don't have to use an ObjectDataSource control to retrieve items in your data source, you could also a SQLDataSource, etc.

Image 1

  1. Load the jQuery framework and the jQuery tooltip plug-in. Also load the stylesheet for use by the tooltip. Note: The code below shows we're loading a JavaScript file.
  2. ASP.NET
    <link rel="stylesheet" type="text/css" href="Styles/jquery.tooltip.css" />
    <script src="Scripts/gridview-readonly-script.js" type="text/javascript"></script>

    Inside the JavaScript file, two scripts are being loaded:

    JavaScript
    loadJavaScriptFile("Scripts/jquery-1.4.1.min.js");
    loadJavaScriptFile("Scripts/jquery.tooltip.min.js"); 
    
    function loadJavaScriptFile(jspath) {    
        document.write('<script type="text/javascript" src="' + 
                       jspath + '"><\/script>');
    }
  3. Initialize the jQuery UI Tooltip plug-in.
  4. JavaScript
    $(function () {
        InitializeToolTip();
    });
    JavaScript
    function InitializeToolTip() {    
       $(".gridViewToolTip").tooltip({        
          track: true,        
          delay: 0,        
          showURL: false,        
          fade: 100,        
          bodyHandler: function () {            
             return $($(this).next().html());        
          },        showURL: false    
        });
    }
  5. We need a way to re-initialize the tooltip whenever there's a postback, for example, when the user clicks one of the paging numbers or when the GridView is sorted. This is because the tooltip will stop working on postbacks. To do this, we need to call the initialization function seen above on page loads. See code below.
  6. JavaScript
    function pageLoad(sender, args) {    
       if (args.get_isPartialLoad()) {        
          InitializeToolTip();    
       }
    }
  7. Add a TemplateField in the GridView. Inside the template field, add a div tag with a class named "tag". Also add an anchor tag, this will be the link we're going to hover on.
  8. ASP.NET
    <asp:TemplateField HeaderText="Category ID" 
         SortExpression="CategoryID" HeaderStyle-Wrap="false">
      <ItemStyle Width="30px" HorizontalAlign="Center" />    
        <ItemTemplate>
          <div class="tag">
            <a href="#" class="gridViewToolTip"><%# Eval("CategoryID")%></a>
            <div id="tooltip" style="display: none;">
              <table>
                <tr>
                   <td style="white-space: nowrap;"><b>Category ID:</b> </td>
                   <td><%# Eval("Categories.Value.CategoryID")%></td>
                </tr>
                <tr>
                   <td style="white-space: nowrap;"><b>Category Name:</b> </td>
                   <td><%# Eval("Categories.Value.CategoryName")%></td>
                </tr>
                <tr>
                    <td style="white-space: nowrap;"><b>Description:</b> </td>
                    <td><%# Eval("Categories.Value.Description")%></td>
                </tr>
              </table>
            </div>
          </div>
       </ItemTemplate>
    </asp:TemplateField>

You will notice that the class name (class="gridViewToolTip") being used for the anchor tag is the one we referenced during initialization. The key lies here. The div tag below this anchor tag will show every time you put your mouse over the link. And that's it.

Last Words

To run the code download, make sure to download and install Microsoft's Northwind database. Also make sure to change the user name and password on the Dbase.cs (Dbase.vb) class file found in the App_Code folder, under the Helper folder. The code for download is a modified version of the generated web form by AspxFormsGen 4.0.

The original article can be found here.

Demo

Click here to see the demo.

As always, the code and the article are provided "As Is", there is absolutely no warranties. Use at your own risk.

Happy coding!!!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
None.

Comments and Discussions

 
Questionhide tooltip dynamically Pin
saravananraju11-Dec-12 2:03
saravananraju11-Dec-12 2:03 
QuestionClicking on Edit icon should fill existing values to the field. Pin
Asif Rehman23-Nov-12 2:40
Asif Rehman23-Nov-12 2:40 
GeneralMy vote of 5 Pin
Ajith_joseph13-Aug-12 4:18
Ajith_joseph13-Aug-12 4:18 
QuestionBest Article but could i run at framework 2.0? Pin
Rehan Hussain18-Aug-11 20:42
Rehan Hussain18-Aug-11 20:42 
AnswerRe: Best Article but could i run at framework 2.0? Pin
junnark22-Aug-11 8:43
junnark22-Aug-11 8:43 
GeneralMy vote of 5 Pin
Dilip Baboo18-Aug-11 8:10
Dilip Baboo18-Aug-11 8:10 
QuestionMy vote is 5 Pin
Stephen Wu 717-Aug-11 10:37
Stephen Wu 717-Aug-11 10:37 
GeneralMy vote of 5 Pin
Debapriya Sahoo9-Aug-11 22:49
Debapriya Sahoo9-Aug-11 22:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.