CODEWITHSUNDEEP
javascriptjquery
Fiv
Fiv

Reputation: 175

Google plus popup box when hovering over thumbnail?

I'm trying to figure out how to create a popup box with user profile details on mouseover like you see on google plus. When hovering over a thumbnail a popup appears with the option to add that person into your circle.

It seems kinda simple to do with jQuery but I've been unable to find a simple solution. Most of the plugins I've come across are too complicated and require a lot of tweaking. Any help on how to do this would be greatly appreciated! Hover Effect Screenshot

Upvotes: 1

Views: 1338

Answers (2)

Kato
Kato

Reputation: 40582

You'll want to try something like this. It doesn't handle all the cases you'll need (you need the hover to stay active when user enters the popup); but you can work some of those out I hope.

Here's the basic jQuery code:

jQuery(function($) {
    function getMyContent($img) {
       // do your fancy ajax calls or append your control links and such here
       return $('<p />').append($img.clone()).append('Here is my fancy hoverbox');
    }

    $('#content img').mouseenter(function(e) {
        var $this = $(this), off = $this.offset();
        var pos = {
            // or you could position it relative to the mouse
            top: (e.clientY + 2) + 'px',
            left: (e.clientX + 2) + 'px'
        };
        $('#hoverbox').css(pos)
            .append(getMyContent($this))
            .fadeTo('slow', .95);
    }).mouseleave(function(e) {
        $('#hoverbox').fadeOut('slow', function() { $(this).html(''); });
    });
});

UPDATE: Here is one that handles the hover events on the popup for you (yeah, I'm still messing around with it; why?)

Upvotes: 5

Casey Kinsey
Casey Kinsey

Reputation: 1441

The simplest solution would be to add a hidden div to the element that wraps around your profile photo.

<div class="profile-popup" style="display: none;">
    <!-- Popup info goes here -->
</div>

Go ahead and style the div with CSS however you want it to appear, say with absolute positioning at the bottom right corner for the "pop out" effect. Then register a mouseOver event in jQuery that shows the div:

$().ready( function() {
    $('.profile-pic-wrapper').mouseenter( function() {
        $('.profile-popup', this).show( //pass in some animation options here );
    });
    $('.profile-pic-wrapper').mouseleave( function() {
        $('.profile-popup', this).hide( //pass in some animation options here );
    });
});

This is just a basic idea (and that code may need to be tweaked a bit). You'll have to add some additional logic to keep the popup open when the user mouses into it, but this should get you started.

The more elegant solution would be to pass JSON data to your jQuery script and have it generate the popup div dynamically on hover, but that is a bit more advanced.

Upvotes: 4

Related Questions