Wikipedia summary cards for the web
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
build
config
docs
public
scripts
src
.gitignore
.travis.yml
LICENSE
README.md
demo.png
package.json
yarn.lock

README.md

Hovercard

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.

Travis (.org) GitHub Made in Enschede

Screenshot of a Hovercard demo

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