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.



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.


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);


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