Question

I’m trying to find an example of how to use hovercard with HTML data using custom showCustomCard: true, however it only gives an example for JSON. I am revamping my app and I am already sending html based callback data.

Anyone else try to use hovercard in such a way? Without JSON but simply having it call to get user data?

Here is my code (I have multiple users on a page that need to have a hovercard for): http://jsfiddle.net/TtQH3/

Bascially any idea if I am missing something for loading HTML data instead of the required JSON?

Answer 1

Well I figured this out myself after a little trial and error and more review of the demo code.

Here is a working javascript solution that I just used, the trick is ‘onHoverIn’ or any other call, just create a function (my case was a simple ajax call to my backend script to load user data).

$(function() {

    var hoverUserDetails = '<div class="hover-details"></div>';

    $(".hover-me").hovercard({
        detailsHTML: hoverUserDetails,
        width: 480,
        onHoverIn: function () {

            $.ajax({
                url: $(this).children('a').attr('data-hovercard'),
                type: 'GET',
                beforeSend: function () {
                    $(".hover-details").prepend('<p class="loading-text">Loading details...</p>');
                },
                success: function (data) {
                    $(".hover-details").empty();
                    $(data).appendTo(".hover-details");
                },
                complete: function () {
                    $('.loading-text').remove();
                }
            });
        }
    }); 

});

Hope that helps someone! See my jsfiddle if you need the HTML example with it.