From MediaWiki.org
Jump to: navigation, search

Other languages:
català • ‎Deutsch • ‎English • ‎español • ‎suomi • ‎français • ‎italiano • ‎日本語 • ‎polski • ‎português • ‎português do Brasil • ‎русский • ‎sicilianu • ‎中文
MediaWiki extensions manual
Crystal Clear action run.png

Release status: beta

HoverCard Inheritance.png
Implementation Skin
Description Displays popups when users hover over article links
Author(s) Prateek Saxena, Yair Rand (Prtksxnatalk)
MediaWiki 1.25+
PHP 5.3.3+
Database changes No
License GNU General Public License 2.0 or later
Hooks used

Translate the Popups extension if it is available at translatewiki.net

Check usage and version matrix; code metrics


Open tasks · Report a bug

The Popups extension displays "hovercards" − popups with summaries of article contents when the user hovers over an article link.

This is an initiative of the Design team, to move popular Gadgets into Beta Features. Mockups and more information available at Hovercards.


This extension has a hard dependency on Extension:TextExtracts and Extension:PageImages. There is also an optional dependency on Beta Features (without BetaFeatures, it loads for all users) and Extension:EventLogging (for logging).


  • Download and place the file(s) in a directory called Popups in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
wfLoadExtension( 'Popups' );
  • Run the update script which will automatically create the necessary database tables that this extension needs.
  • YesY Done - Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

To users running MediaWiki 1.24 or earlier:

The instructions above describe the new way of installing extensions using wfLoadExtension(), since MediaWiki 1.25. If you need to install this extension in earlier versions, instead of wfLoadExtension( 'Popups' );, you need to use:

require_once "$IP/extensions/Popups/Popups.php";
  • Enable the beta feature
$wgPopupsBetaFeature = true;


The popups show an image (if one is available), a small text excerpt and the timestamp of the last edit.


The image comes from the Extension:PageImages which returns the single most appropriate thumbnail associated with an article. It ignores maintenance templates, stubs, flag icons etc.


The text comes from the Extension:TextExtracts from which a plain-text extract is requested (see that extension for exclusions). sentences are requested from the intro section and a limit is put through CSS that makes sure that text doesn't overflow from the card. This is done by applying a max-height on that element. This approach would provide the same visual solution regardless of the language's script. A major con is that the text stops abruptly and ellipses can't be added.

Show/hide timing[edit]

The timing of the show/hide can currently be adjusted via code, which should be added to your local Special:MyPage/common.js or global.js file :

mw.loader.using( [ 'ext.popups' ], function() { //wait for popups to be loaded

// Time to wait in ms before showing a popup on hover. Default is 500.
mw.popups.render.POPUP_DELAY = 500;

// Time to wait in ms before closing a popup on de-hover. Default is 300.
mw.popups.render.POPUP_CLOSE_DELAY = 300;

// Time to wait in ms before starting the API queries on hover, must be <= POPUP_DELAY. Default is 50.
// Don't change this unless you know what you're doing.
mw.popups.render.API_DELAY = 50;



This extensions currently has only one renderer, that is for ordinary pages. New renderers for different kind of pages, or things like references can be easily added. One needs to create a new object with the following methods:

  • init
  • createPopup
  • getOffset
  • getClasses
  • processPopup

You can see details of these methods in ext.popups.renderer.article.js or this patch that adds a renderer for references.