PHPackages                             wikimedia/wikipedia-preview - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wikimedia/wikipedia-preview

ActiveLibrary[Utility & Helpers](/categories/utility)

wikimedia/wikipedia-preview
===========================

Shows Wikipedia article preview in a popup

77023[1 PRs](https://github.com/wikimedia/wikipedia-preview/pulls)JavaScriptCI failing

Since Feb 15Pushed 2mo ago7 watchersCompare

[ Source](https://github.com/wikimedia/wikipedia-preview)[ Packagist](https://packagist.org/packages/wikimedia/wikipedia-preview)[ RSS](/packages/wikimedia-wikipedia-preview/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)DependenciesVersions (10)Used By (0)

[![CI](https://github.com/wikimedia/wikipedia-preview/actions/workflows/main.yml/badge.svg)](https://github.com/wikimedia/wikipedia-preview/actions/workflows/main.yml)

Wikipedia Preview
=================

[](#wikipedia-preview)

Wikipedia Preview is a JavaScript component that allows you to provide context from Wikipedia about words or phrases on any website. It lets you show a popup card with a short summary from Wikipedia when a reader hovers over a link.

Tasks and issues are tracked on [Phabricator](https://phabricator.wikimedia.org/project/profile/4393/).

DesktopMobileDark modeFullscreen gallery[![Desktop](./screenshot-hover.png)](./screenshot-hover.png)[![Mobile](./screenshot-touch.png)](./screenshot-touch.png)[![Dark](./screenshot-darkmode.png)](./screenshot-darkmode.png)[![Gallery](./screenshot-gallery.png)](./screenshot-gallery.png)Storybook:

Compatibility
-------------

[](#compatibility)

BrowsersVersionsChrome, Firefox, Opera, EdgeCurrent and previous versionInternet Explorer11+Safari5.1+iOS6.1+Android4.1+Features
--------

[](#features)

- Works with any link that has an article on Wikipedia
- Supports LTR and RTL languages
- Works for articles with or without a lead image

Getting Started
---------------

[](#getting-started)

Integrating Wikipedia Preview to your site consists of a three-step process:

1. Loading wikipedia-preview.js (as a standalone script, WordPress plugin, or an npm dependency)
2. Invoking `wikipediaPreview.init(  )`
3. Annotating articles accordingly

You can read more about each step below. Once Wikipedia Preview is set up correctly, you should see the version information being logged in your JS console. You can also invoke `wikipediaPreview.version()` from your JS console to view version information at any time.

### WordPress Plugin

[](#wordpress-plugin)

A WordPress plugin providing a thin wrapper around Wikipedia Preview to simplify its integration and usage within WordPress is available on [GitHub](https://github.com/wikimedia/wikipediapreview-wordpress) and [WordPress.org](http://wordpress.org/plugins/wikipedia-preview/).

### Standalone Script

[](#standalone-script)

```

  wikipediaPreview.init()

```

You can serve the file yourself or include it from [unpkg](https://unpkg.com/browse/wikipedia-preview@latest/dist/wikipedia-preview.umd.cjs) (The library version 1.9.0 and later cannot be loaded from Unpkg due to a [MIME type mismatch issue](https://github.com/mjackson/unpkg/issues/355), the current [workaround solution](https://github.com/mjackson/unpkg/issues/355#issuecomment-1541524887) is adding the `?module` parameter to get the correct content-type).

### NPM

[](#npm)

```
$ npm install wikipedia-preview --save
```

```
const wikipediaPreview = require('wikipedia-preview')
wikipediaPreview.init()
```

### Options of the init function

[](#options-of-the-init-function)

The `init` function accepts the following options:

NameTypeDefaultDescriptionrootstring,Element,Element\[\]`document`Where to look for elements that should have the popup selector. Can be a selector to locate the root, a DOM Element, or an array of Elementsselectorstring`'[data-wikipedia-preview]'`How nodes that should have the popup are identifiedlangstring`'en'`Default Wikipedia languagepopupContainerstring,Element`document.body`Where to put the popup in the DOM. Can be a selector or a DOM element.detectLinksBoolean`false`Allow Wikipedia hyperlinks to have the popupeventsObject`{}`Custom event handlers: `{ onShow: , onWikiRead:  }`debugBoolean`false`Shows the debug message when `init()` is calledprefersColorSchemestring`'detect'`Sets theme color. Allowed values are 'light', 'dark' and 'detect'. Setting it to 'light' or 'dark' will dictate theme color regardless of [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme); setting to 'detect' will render preview according to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).Example (custom selector)

```

	You can learn about Chat and Chien from Wikipedia.

```

```
wikipediaPreview.init({
	root: document.querySelector('.content'),
	selector: '.wiki',
	popupContainer: '.popup-container',
	lang: 'fr'
});
```

Example (detect Wikipedia links)

```

	You can learn about Chat and Chien from Wikipedia.

```

```
wikipediaPreview.init({
	detectLinks: true
});
```

Example (custom event handlers)

```
wikipediaPreview.init({
	events: {
		onShow: function(title, lang, type) {
			// call custom instrumentation here
		},
		onWikiRead: function(title, lang) {
			// call custom instrumentation here
		}
	}
});
```

### Attributes

[](#attributes)

#### data-wikipedia-preview

[](#data-wikipedia-preview)

To indicate that a word or expression should bring up the article preview popup, mark it with the `data-wikipedia-preview` attribute (or anything else as long as you're using the `selector` option described above).

#### data-wp-title

[](#data-wp-title)

When the article title is not the same as the node's `textContent` property, use the `data-wp-title` attribute to specify the article title.

Note that the article title can include a section id. For example: `Europe#Classical_antiquity`

#### data-wp-lang

[](#data-wp-lang)

To use a language different than the language specified in the options, use the `data-wp-lang` attribute.

#### .wmf-wp-with-preview

[](#wmf-wp-with-preview)

To use the default trigger link styling:

- Add the following link to the page header:

```

```

- Add the class `wmf-wp-with-preview` to the node

If you prefer to style them in a way that makes more sense for your context, simply don't include the `wikipedia-preview-link.css` link in the header and add your own class to the node. Both of these are valid ways:

```
[data-wikipedia-preview] {
	background-color: yellow;
}
```

```
.my-own-css-style {
	background-color: yellow;
}
```

#### CSS custom properties

[](#css-custom-properties)

If you wish to adjust the styling of the light/dark theme, you can override the following CSS custom properties to your liking as shown below, under the appropriate [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) query.

```
@media (prefers-color-scheme: dark) {
	.wikipediapreview {
		--wikipediapreview-primary-background-color: #202122;
		--wikipediapreview-secondary-background-color: #202122;
		--wikipediapreview-primary-color: #eaecf0;
		--wikipediapreview-filter-setting: invert(1);
	}
}
```

Acknowledgements/Contributors
-----------------------------

[](#acknowledgementscontributors)

This is heavily inspired by [jquery.wikilookup](https://github.com/mooeypoo/jquery.wikilookup) and [Page Previews](https://www.mediawiki.org/wiki/Page_Previews).

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance58

Moderate activity, may be stable

Popularity17

Limited adoption so far

Community23

Small or concentrated contributor base

Maturity31

Early-stage or recently created project

 Bus Factor1

Top contributor holds 52.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/716c86d71cbf921e7912a505f89d799de398fc0a3af0bd4c8862834b2d642bd7?d=identicon)[wikimedia](/maintainers/wikimedia)

---

Top Contributors

[![translatewiki](https://avatars.githubusercontent.com/u/24829418?v=4)](https://github.com/translatewiki "translatewiki (294 commits)")[![hueitan](https://avatars.githubusercontent.com/u/2560096?v=4)](https://github.com/hueitan "hueitan (74 commits)")[![sbisson-hash](https://avatars.githubusercontent.com/u/270727046?v=4)](https://github.com/sbisson-hash "sbisson-hash (65 commits)")[![stephanebisson](https://avatars.githubusercontent.com/u/679125?v=4)](https://github.com/stephanebisson "stephanebisson (58 commits)")[![medied](https://avatars.githubusercontent.com/u/4752599?v=4)](https://github.com/medied "medied (55 commits)")[![varnent](https://avatars.githubusercontent.com/u/674625?v=4)](https://github.com/varnent "varnent (4 commits)")[![shailesh1028](https://avatars.githubusercontent.com/u/41967175?v=4)](https://github.com/shailesh1028 "shailesh1028 (3 commits)")[![kitarp29](https://avatars.githubusercontent.com/u/56778773?v=4)](https://github.com/kitarp29 "kitarp29 (1 commits)")[![jpita](https://avatars.githubusercontent.com/u/5482105?v=4)](https://github.com/jpita "jpita (1 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")

---

Tags

wikipedia

### Embed Badge

![Health badge](/badges/wikimedia-wikipedia-preview/health.svg)

```
[![Health](https://phpackages.com/badges/wikimedia-wikipedia-preview/health.svg)](https://phpackages.com/packages/wikimedia-wikipedia-preview)
```

###  Alternatives

[odan/tsid

A library for generating Time Sortable Identifiers (TSID).

25229.8k](/packages/odan-tsid)[yooper/stop-words

Stop words

14399.5k4](/packages/yooper-stop-words)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)