README.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# hovercard.js

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

This is a fork of the [original project](https://github.com/capjamesg/hovercard.js) intended for use with [indieweb-glue](https://indieweb-glue.evgenykuznetsov.org/).

## Example

![Text in an article with an active hovercard that contains an image, a title, and a description](screenshot.png)

## 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