Question

I am using Hovercard and it works perfectly with the following code:

$.getJSON("userjson.php"
    function(result){
        $('.user').hovercard({
            showCustomCard: true, 
            customCardJSON: result,
            openOnLeft: true
        });
    });

In the code above i am just taking the information that is stored in the database of the user that is currently logged in using cookies:

$username = $_COOKIE['username'];

$user_select = mysql_query("SELECT * FROM users WHERE username='$username'",$con);
$user_array = mysql_fetch_array($user_select);

$user = array(
    'name' => "<p style=\"text-align:left; text-decoration:underline;\">".$user_array['username']."</p>",
    'bio' => "<p style=\"text-align:left\"><br>".$user_array['bio']."</p>",
    'image' => "/pictures/users/".$user_array['propic']
);

echo json_encode($user);

However, I want to replace the user information from the current logged in user to the user who’s name is being hovered over:

$('.user').hover(function() {
    var obj = $(this);
$.getJSON("userjson.php",{name: obj.text()},
        function(result){
            obj.hovercard({
                showCustomCard: true, 
                customCardJSON: result,
                openOnLeft: true
            });
    });
});

This does work (to some extent). I have to hover over the name once and then another time for it to show and then it does not go away when i take the mouse away..

Here are 2 videos i took so that you actually have an idea about what I’m talking about:

Working code taking the logged in user: http://www.youtube.com/watch?v=FrWmOE-r8AA

Not working code taking the hovered username: http://www.youtube.com/watch?v=E9ksekpBnv0

I NEED HELP!

Answer 1

The hover card should not be added upon hover but initially.

$.each($(".user"), function() {
    var element = $(this);
    $.getJSON("userjson.php", {name: $(element).text()}, function(resp) {
        $(element).hovercard({
            showCustomCard: true, 
            customCardJSON: resp,
            openOnLeft: true
        });
    });
});