Отображение окна наведения при наведении курсора мыши на кнопку ссылки в asp.net

Я делал нечто подобное в прошлом, но запускал сгенерированную ячейку таблицы. Я добавил идентификатор в атрибут rel ячейки таблицы. Для этого я использовал событие RowDataBound, вы должны иметь возможность сделать что-то подобное с помощью кнопки ссылки. Используйте встроенный сериализатор jSON для загрузки информации на страницу, а затем используйте приведенный ниже код для всплывающего окна.

Вот как я сериализовал свои данные в коде позади, очевидно, вам нужно настроить это под свои нужды:

//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);

Пример 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();    
        });

РЕДАКТИРОВАТЬ: Чтобы дать некоторый контекст, это используется, когда пользователь выбирает событие для посещения, с сеткой, показывающей название места. При наведении указателя мыши на ячейку сетки всплывающее окно отображает полную информацию о месте проведения.

Запишите все данные, которые должны отображаться при наведении курсора, в блоки div. Затем покажите и скройте соответствующий div при наведении курсора.

РЕДАКТИРОВАТЬ: Похоже, я неправильно прочитал вопрос - пропустил бит о запросе в базе данных содержимого при наведении курсора. Думаю, для начала нужно загрузить слишком много данных? Это кажется маловероятным, и если возможно, вам стоит подумать о разбиении данных на страницы. Наведение указателя мыши обычно используется для небольших объемов быстрой информации, обратный вызов в базу данных для этого не совсем быстрый - во всяком случае, не "в пользовательском интерфейсе на клиентском javascript quick". И обратный вызов при наведении курсора кажется мне плохим для пользователя, потому что даже если это относительно быстро, во время выборки данных будет короткая пауза, и только потому, что пользователь перестал двигать мышью - я думаю, что это неправильно. . Я бы предложил событие щелчка для обратного вызова в базу данных, и таким образом пользователь будет ожидать, что что-то произойдет.

Я все еще думаю, что вам следует загружать эти данные при наведении курсора в код и записывать их в блоки div, что даст вам большой контроль над скрытием и отображением, стилем и позиционированием.