hovercard.js

A script to load cards when you hover over a link in an article.

This is a fork of the original project intended for use with indieweb-glue.

Example

Getting Started

The 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.

Usage

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.

Roadmap

[x] Customized hovercards for H-Cards. [ ] Show more information for H-Cards.

License

This code for this project is placed in the public domain.

Contributors

• capjamesg
• evgenykuznetsov.org