Show popup on mouseover with link

Question

I am showing the list of users with images as a grid in my asp.net mvc (C#) application.

When i click on the user's image, i need to show a bubble popup (like, when we click on events cell in google calendar). The popup will contain some basic information of the user and an edit and delete option.

How can i achieve it in asp.net MVC using jquery?

Answer 1

Check this article: How to create a stunning and smooth popup using jQuery

Answer 2

Basically, you just need to make one of those bubbles. Either using CSS or as an image (depends on how flexible it needs to be), and then you can use jQuery to show and position it on click

$(".userImage").click(function() {
    var pTop = $(this).offset().top;
    var pLeft = $(this).offset().left;
    $("#bubble").css({
        top: pTop,
        left: pLeft
    }).fadeIn();
});

This is the image sprite Google uses to create their bubble.