Search code examples
c#asp.netlinkbutton

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 displays 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.

Solution

  • 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.