README.md

Hovercard is a JavaScript library to get Wikipedia summary cards for terms on mouse over. It's useful in explaining concepts or to give summaries to Wikipedia links.

You can get Hovercard from NPM:

yarn add hovercard

Then import and initialize it (optionally, set your Wikipedia language):

import Hovercard from "hovercard";
const cards = new Hovercard({
    lang: "en"
});

And add the CSS class hovercard on the elements you want hovercards for:

<span class="hovercard">Facebook</span>

Links

You can have the hovercard link to the respective Wikipedia article:

new Hovercard({
    link: "wikipedia"
});

You can also have the hovercard link to the referer (the element whose hovercard this is):

<a href="https://google.com" class="hovercard">Google</a>

new Hovercard({
    link: "inherit"
});

Finally, you can also supply a custom link for a hovercard using the data-link attribute:

<span data-link="https://google.com" class="hovercard">Google</span>

Demo

Literally made this in a few hours. Lots to be done.

Todo:

• Support all languages, not just English Wikipedia
• Place cards better (top right, etc., not just bottom left)
• Keep cards visible on hover, not just link hover
• Support for cards linking to article/other things
• Support multiple sources (other than Wikipedia)
• Fade cards in and out, don't just display none them
• Better loading/error states?
• Polyfill for fetch? Docs if none
• oEmbed like previews for other services
• Auto detect Wikipedia links and hovercard