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.
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!
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.
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.
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.
Based on the original work on Extension:Popups.