Click here to Skip to main content
15,880,543 members
Articles / Web Development / CSS
Alternative
Tip/Trick

jQuery tooltip with Ajax tooltip datasource with gridview

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
12 Oct 2011CPOL 13.8K   66   3   1
I have below suggestions:1) Why are you making call to webmethod are you fetching data from server and showing it in tool tip ? But in your example it seems that you are just returning the same data that you get from UI. If you are making some DB call and returning data to UI then its ok to...
I have below suggestions:
1) Why are you making call to webmethod are you fetching data from server and showing it in tool tip ? But in your example it seems that you are just returning the same data that you get from UI. If you are making some DB call and returning data to UI then its ok to call webmethod.

2) From your server you are returning HTML. I would suggest to return only the data. Because the HTML is constant and that you can make it in javascript code and cache it using jquery $.data command. Also keep the styles away from the div, create some css rules class for that. So that your bandwidth will be saved and it will make showing of tooltip more faster.

3) You could do like:
CSS
.toolStyle { width:300px; height:100px;background-color:gray;color:white }


JavaScript
bodyHandler: function() {
    var 
    VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text()
    ,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) {
            //get tooltip DOM from cache
            var toolDom = $(this).data('tool');
            if(toolDom) {
                toolDom.html(msg.d);//put data on your div
                $("#loadingimage").parent().html(toolDom); //inject the message div on tooltip
            } else {
                //storing the tooltip div DOM in cache.
                $(this).data('tool',$("div />",{"class":"toolStyle"}));
            }                        
        }
    });
    return $("<img id="loadingimage" src="http://www.heathrowtosouthampton.co.uk/Web/images/gif/Processing1.gif" />");
}

License

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


Written By
Software Developer (Senior)
United States United States

I am a Senior Software Developer working since 2005 in Microsoft ASP.Net and related Technologies.


I work on C#, Asp.Net, MVC, RAZOR, Entity Framework, JavaScript, jQuery, HTML5, CSS3, WCF, Silverlight, WPF, MVVM, SQL, SSIS, etc. Did Function Point Analysis, WBS to estimate projects and worked on Agile Scrum team.



I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.



I wrote an article on Swami Vivekananda posted his audio speeches by reading them.


Comments and Discussions

 
GeneralTo answer to your first question, yes this article is meant ... Pin
Anup Das Gupta (asteranup)20-Oct-11 21:53
Anup Das Gupta (asteranup)20-Oct-11 21:53 

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.