Display hover box at mouse position over link button in asp.net

I am currently working on a C# ASP.net project. I have a data grid which contains a link button which displ开发者_C百科ays the text bound from the database and binds a command argument for the record id.

I want to allow the user to be able to position the mouse over this link button and display a hover popup next to the mouse cursor. When the mouse is hovered over the link button before it is displayed to the user I want it to load data from the database based on the id from the command argument and display the data inside the hover popup. How can I go about doing this, I assume it would be jQuery I would need but not sure how to fire the hover event and display something based on a command argument value of a link button.

I've done something similar in the past, but triggering off the table cell generated. I added an identifier to the rel attribute of the table cell. I used the RowDataBound event to achieve this, you should be able to do something similar with your link button. Use the inbuilt jSON serialiser to load up the information onto a page then used the code below for the pop up.

Here is how I serialized my data in the code behind, obviously you need to tweak this to your needs:

//Grab Venue Details using LINQ
var venues = (from evt in futureEvents
              select new { VenueID = evt.Venue.VenueID, evt.Venue.Description, evt.Venue.Address.Address1, evt.Venue.Address.Suburb }).Distinct();

//Serialize Venues for use in tool tip
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(venues);
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jSONVenues", "var venues = " + json + ";", true);

Sample jSON

var venues = [{"VenueID":393,"Description":"Dee Why RSL","Address1":"932 Pittwater Road","Suburb":"Dee Why"}];

jQuery

this.tooltip = function() {
/* CONFIG */
    xOffset = 20;
    yOffset = 20;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
/* END CONFIG */
/*Set Up hover for table cell change this for you link */
   $("[Your Gridview ID or class] tr>td:first-child").hover(function(e) {
/* Get ID From rel attribute */        
       this.t = $(this).attr("rel");     
       var offset = $(this).offset();
       var venue;

       for (i = 0; i < venues.length; i++) {
            venue = venues[i];
            if (venue.VenueID == this.t) {
                i = venues.length + 1;
                }
            }

       $("body").append("<p id='tooltip'><strong>" + venue.Description + "</strong><br>" + venue.Address1 + ", " + venue.Suburb + "</p>");
       $("#tooltip")
        .css("top", (offset.top + xOffset) + "px")
    .css("left", (offset.left + yOffset) + "px")
    .fadeIn("fast");

        },
    function() {$("#tooltip").remove();});            
    };

   // starting the script on page load
        $(document).ready(function() {
            tooltip();    
        });

EDIT: To give some context, this is used where a user selects an event to attend, with the grid showing the venue name. Hovering over the grid cell will cause the pop up to show the full venue details.

Write all the data you want to appear in the hover-over into divs. Then show & hide the relevant div on hover-over.

EDIT: Looks like I didn't read the question properly - missed the bit about querying the database for the hover-over content. I guess there is too much data to load to start with? That seems a bit unlikely, and if it is maybe you should think about paging the data. Hover-overs are generally for small amounts of quick info, calling back to the database for this isn't exactly quick - not "in the UI on the client javascript quick" anyway. And calling back on a hover-over seems like bad user experience to me because even if it is relatively quick there will be a short pause whilst the data is being fetched, and just because the user stopped moving the mouse - I think that is wrong. I'd suggest a click event for calling back to the database and that way the user is going to expect something to happen.

I still think you should be loading this hover-over data in the code behind and writing it into divs which will give you a lot of control over hiding & showing, style, and positioning.