The information below may be outdated. For the latest version, check the repository.
A script to load cards when you hover over a link in an article.
hovercard.js script searches for all
<a> tags enclosed within the tags marked with a specified class on a web page. Mouse hover and focus listeners are added to each link. When the mouse hovers over a link,
hovercard.js looks for the
href value of the link in a JSON object called
hovercards. If the link is found in the JSON object, a hovercard is added directly below the link on the page.
When a user hovers off the link or moves focus onto another element (i.e. by using the keyboard to navigate links on the page), the hovercard will disappear.
To use the hovercard script, first download a copy and upload it to your site. Then, add this code above the closing
</body> tag on your web page:
<script src="./path/to/hovercard.js" data-class="use-hovercards"></script>
Substitute the path of the script in the example above with the location of the script on your site, and
"use-hovercards" with any class name to your liking. If the
data-class part is omitted, the script will look in the
"content" class by default.
[ ] Customized hovercards for H-Cards.
This code for this project is placed in the public domain.