Hovercards are business card like popups which appear when your mouse hovers over, for example, a user name.
They’re useful to display summary information without the requirement for the visitor to click on a link and navigate away from the current page.
I needed this functionality for a couple of client sites, so I put together a quick Elgg plugin to implement hovercard functionality via the very cool hovercard.js library written by Prashant Chaudhary.
Out of the box, the plugin provides hovercard functionality for most occurrences of a user’s name in user listings and the site river. I didn’t want to get too carried away, since I was in a hurry and I didn’t want to override every user view in Elgg! However, you should be able to see how I used the view system to provide a hovercard view on the data.
Usage
Checkout the repository and install it into your mod directory as elgg-hovercard, and activate it in the usual way.
The plugin makes use of the Elgg view system and creates a hovercard data view on user objects, accessible by appending a view=hovercard onto any profile URL. This endpoint returns a JSONP object containing basic hovercard profile data, which is automatically rendered by hovercard.js.
The simplest way to display a hovercard for a user is to use this endpoint via the data-hovercard attribute, e.g.
<a class="hovercard-custom" data-hovercard="<?= $user->getUrl(); ?>?view=hovercard" href="<?= $user->getUrl(); ?>"><?= $user->name; ?></a>
This code (which I have highlighted the important parts of), will cause the library to fetch the hovercard data for the given user via ajax.
To provide further customisation, or to display hovercards for things other than user details, you can take advantage of the output/hovercard view, passing it the contents of the hovercard and a jquery style selector to bind to.
Anyway, have a play!