Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

hovercard

1.3.2 • Public • Published

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 CI GitHub Vulnerabilities Made in Enschede

NPM

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

Keywords

install

npm i hovercard

Downloadsweekly downloads

5

version

1.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability