Gravatar Hovercards are a feature that allows you to display a pop-up card with a user’s Gravatar profile information when you hover over their Gravatar image. This feature enhances user interaction and provides more context about users on your website.
Hover over this avatar to see an example:
Prerequisites
Before you begin, ensure that your website already utilizes Gravatars for displaying user avatars. If not, integrate Gravatar avatars first by using the standard Gravatar image requests with user email hashes.
Step 1: Include the JavaScript
The first step is to include the Gravatar Hovercards JavaScript on your website. Add the following script tag in the <head> section of your HTML:
https://secure.gravatar.com/js/gprofiles.jsThis script will automatically detect Gravatar images on your page and attach hovercard functionality to them.
Step 2: Enable Hovercards
To activate Hovercards, you need to add a specific class to your Gravatar image elements. Modify your Gravatar image tags by adding the class hovercard as shown below:
<img src="https://www.gravatar.com/avatar/yourhash" class="hovercard" alt="user's name">Replace yourhash with the actual SHA256 hash of the user’s email address. This class tells the Hovercard script to apply the pop-up profile card to these images.
That’s It!
Once you have added the necessary script and modified your image tags, test the hovercards on your site. Hover over a Gravatar image to see the hovercard appear. Ensure that it displays the correct information and behaves as expected.
The Hovercards Library
We offer a JavaScript library for Gravatar Hovercards, designed to seamlessly integrate Gravatar profiles into your website. This user-friendly library transforms static Gravatar images or any element with the data-gravatar-hash attribute into interactive hovercards, enhancing user engagement and providing a richer experience. For detailed usage instructions and more information, please refer to our GitHub documentation.
Gravatar Developer Docs