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.