Click here to Skip to main content
Click here to Skip to main content

jQuery tooltip with Ajax tooltip datasource with gridview

By , 20 Oct 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

This morning I was trying to integrate jQuery tooltip plugin with grid view. What I need is on hovering of the one cell, I want to pass some parameters and read the content of the tooltip from a web method. I could not find any straightforward solution of the problem. So, I thought of sharing my take on it.

Using the Code

The grid view used in this case has the following content:

gridcontent.PNG

Now on hover of the last delivery date, I am passing Vendor no and item id to the web method. Following is showing the tooltip content loading stage:

loading.PNG

After content is loaded, the following UI is displayed

loaded.PNG

For using this code, we need to have the jQuery and tooltip plugin files. In case of the CSS, we can create our own CSS file. Following are the needed files
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.js" type="text/javascript"></script>
 
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
 
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet"
    type="text/css" />
For ease, I am using in memory object as the datasource of the grid as follows:
    protected void Page_Load(object sender, EventArgs e)
    {
        var dataSource = (new[] { new { VendorID = 1, ItemName = "ItemName 0", ItemID = 1, DeliveryDate = DateTime.Now } }).ToList();
        dataSource.Add(new { VendorID = 2, ItemName = "ItemName 1", ItemID = 2, DeliveryDate = DateTime.Now.AddDays(-10) });
        dataSource.Add(new { VendorID = 3, ItemName = "ItemName 2", ItemID = 3, DeliveryDate = DateTime.Now.AddDays(-20) });
        dataSource.Add(new { VendorID = 4, ItemName = "ItemName 3", ItemID = 4, DeliveryDate = DateTime.Now.AddDays(-30) });
        dataSource.Add(new { VendorID = 5, ItemName = "ItemName 4", ItemID = 5, DeliveryDate = DateTime.Now.AddDays(-40) });
        dataSource.Add(new { VendorID = 6, ItemName = "ItemName 5", ItemID = 6, DeliveryDate = DateTime.Now.AddDays(-50) });
        dataSource.Add(new { VendorID = 7, ItemName = "ItemName 6", ItemID = 7, DeliveryDate = DateTime.Now.AddDays(-60) });
        GridView1.DataSource = dataSource;
        GridView1.DataBind();
    }
The web method is returning some static HTML for tooltip as below. We can change the implementation as per our need. System.Threading.Thread.Sleep(3000) is used for simulation of the ajax loading. In real implementation, we can remove this.
 
In real time we can implement the web method in our own way and return the data as we need and in the success method of the ajax call we can do the necessary modification.
    [System.Web.Services.WebMethod]
    public static string getLastRequest(string VendorID, string ItemID)
    {
        System.Threading.Thread.Sleep(3000);//used just to simulate ajax delay
        return "<div style='width:300px; height:100px;background-color:gray;color:white'> Result for VendorID=" + VendorID + " and ItemID=" + ItemID + "</div>";
    }
Here comes the core part of the article. The tooltip plugin provides an option named bodyHandler. I am using this option for the tooltip body definition. It accepts a function, where I am doing the ajax call to the web method for the tooltip content. Code goes like below:
                bodyHandler: function() {
                    var VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text();
                    var ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/getLastRequest",
                        data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
                        dataType: "json",
                        success: function(msg) {
                            $("#loadingimage").parent().html(msg.d);
                        }
                    });
                    return $("<img id='loadingimage' src='http://www.heathrowtosouthampton.co.uk/Web/images/gif/Processing1.gif' />");
                }
It's very simple. Initially the bodyHandler function does an ajax call to the web method and immediately returns HTML with a loading image as a content. After the ajax call is successful, on the success method of the ajax call, finding the image that returned earlier and to its parent(i.e. the tooltip body) replacing the result of the ajax call. Thus the earlier loading image is gone and the tooltip body gets the content from the web method call.

License

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

About the Author

Anup Das Gupta (asteranup)
Software Developer (Senior) Logica Pvt. Ltd.
India India
Microsoft Community Contribution Award 2011 winner and Master Degree in Computer Science having more than 4 years of software development experience in different phases of a software development life cycle.
 
Having experience in technical leading of small team. Strong analytical and debugging skill.
 
A technical trainer in jQuery.
 
14000+ points (Star level) in the official Microsoft ASP.NET forum

Comments and Discussions

 
QuestionProblems recognizing the exact element PinmemberMiguel Pinto15-Oct-13 6:31 
QuestionHow would I copy the tool tip text? PinmemberRanjith Maddu1-Jul-12 14:47 
GeneralWill it work in when I use a Masterpage? Pinmemberjaydev260517-Oct-11 10:22 
GeneralRe: Yes it will work with master page. PinmemberAnup Das Gupta (asteranup)20-Oct-11 21:43 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 21 Oct 2011
Article Copyright 2011 by Anup Das Gupta (asteranup)
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid