A fork of hovercard.js that uses indieweb-glue.
The information below may be outdated. For the latest version, check the repository.
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