hovercard
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • 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>

    Important note: This is the README for Hovercard v2, rewritten with additional configuration in TypeScript. For information about v1, view the README for Hovercard v1.

    Configuration

    Use English Wikipedia for the links matching CSS class "info":

    new Hovercard({
      selector: "a.info",
      wikipediaLanguage: "en"
    });

    Custom template for the card's contents:

    new Hovercard({
      template: result => `
        <h1>${result.title}</h1>
        <p>${result.text}</p>
      `
    });

    Fetch data from a custom API, disabling cache instead of Wikipedia:

    new Hovercard({
      noCache: true,
      getFetchEndpoint: word => `https://example.com/dictionary?q=${word}`,
      fetchConfig: {
        method: "POST"
      },
      getHeading: result => result.title,
      getBody: result => result.text
    });

    Custom function to fetch data from your API:

    new Hovercard({
      getData: word => new Promise((resolve, reject) => {
        fetch("my-api")
          .then(data => resolve(data))
          .catch(error => reject(error));
      })
    })

    Use a custom storage instead of local storage for caching:

    const memory = {};
    new Hovercard({
      storage: {
        getItem: key => memory[key],
        setItem: (key, value) => (memory[key] = value)
      }
    })

    Events

    Listen to events:

    const cards = new Hovercard();
    cards.on("created", () => {
      console.log("Hovercards created!");
    });

    Events emitted:

    • created
    • removed-element
    • show
    • hide
    • update

    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

    none

    Install

    npm i hovercard

    DownloadsWeekly Downloads

    1

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    52.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • anandchowdhary