Wikipedia Context Cards

Get Wikipedia page previews on any page!

See some live examples at https://joakin.github.io/context-cards, or check our UI tests for examples of many previews.

How to use

Include the library in your page:

https://unpkg.com/context-cards/dist/context-cards.js

Mark some links with data-wiki-title and data-wiki-lang.

<ul>
  <li>
    <a href="#" data-wiki-lang="en" data-wiki-title="Cake">Cake</a>
  </li>
  <li>
    <a href="#" data-wiki-lang="ca" data-wiki-title="Pastís">Pastís</a>
  </li>
</ul>

Those links should show the previews now on hover and focus!

Right to left languages: previews and content

If you add a link with a language that is right to left, the preview content will automatically show up appropriately (example).

If the content of your page is right to left, and you have the dir attribute set on any of the parent elements of the link, or the link itself, then things should work fine by default, by positioning the card anchored to the bottom right of your link.

If you are doing something strange with your content and don't have those attributes, you can manually add dir="rtl" to the link and the card will work as intended.

Dynamic content

Sometimes you have content that loads later on the page, and is not there on DOMContentLoaded. If that is the case, you will need to tell context cards to refresh the links so that it can bind its interactions as needed.

When including the script in the page, context cards binds itself to window.ContextCards. If you need to tell it to refresh the links and search for new ones, you can call ContextCards.bindLinks(). That should appropriately bind the event handlers for the new links marked with the data attributes mentioned above.

Self hosting the script file

If you don't want to use a npm CDN like unpkg, you can always get the script file for the popups from the npm package after installing it, in the dist/context-cards.js file.

Another alternative is getting it from this git repo. The file you can include is always in dist/context-cards.js, and you can get it from the master branch, or from the git tags which match the npm versions.

Credits

Based on the original work on Extension:Popups.