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.

Star

Demo

Mouse over on any of the following blue labels.

Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. Google was founded in 1998 by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University in California. Together they own about 14 percent of its shares and control 56 percent of the stockholder voting power through supervoting stock. They incorporated Google as a privately held company on September 4, 1998. An initial public offering (IPO) took place on August 19, 2004, and Google moved to its headquarters in Mountain View, California, nicknamed the Googleplex. In August 2015, Google announced plans to reorganize its various interests as a conglomerate called Alphabet Inc. Google is Alphabet's leading subsidiary and will continue to be the umbrella company for Alphabet's Internet interests. Sundar Pichai was appointed CEO of Google, replacing Larry Page who became the CEO of Alphabet.

Content under Creative Commons Attribution-ShareAlike License from Wikipedia.

Code

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" // English is default, supports 291 Wikipedia languages
});

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

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

This renders to: Facebook

You can also customize the design of your hovercards. This page imports the Hovercard JavaScript and CSS, and has the following custom CSS:

.hovercard {
  border-bottom: 1px solid;
  color: #69e;
  cursor: help;
}
.hovercard-element {
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.hovercard-arrow {
  border-bottom: 10px solid #fff;
}
.hovercard-element .hovercard-description::after {
  background: linear-gradient(transparent, #fff);
}

API

Hovercard supports the following initialization properties:

lang	ISO 639-1 language code for Wikipedia
link	What the Hovercard should link to ("wikipedia" or "inherit")

CSS classes

You can customize your hovercards with the following classes:

.hovercard	Class for text on which hovercard will be displayed
.hovercard-element	Real hovercard element that floats
.hovercard-element.hovercard-visible	Class added to hovercard element when it's visible
.hovercard.hovercard-visible	Class added to hovercard text when hovercard is visible
.hovercard-has-image	Class added to hovercard element when it has an image
.hovercard-title	Hovercard title from Wikipedia
.hovercard-description	Hovercard description text from Wikipedia
.hovercard-description::after	Bottom fading gradient for overflowing text
.hovercard-image	Right aligned image in the hovercard
.hovercard-arrow	CSS triangle arrow for hovercard direction