Extension:Popups

The Popups extension displays page previews − summaries of an article's content when the user hovers over a link to that article.

This is an initiative of the Design team, inspired by the popular Navigation popups gadget. Currently this feature is available as a beta-feat>Special:MyLanguage/Beta Features|Beta Feature on Wikimedia wikis. A description of how the extension functions and more information on its use on Wikimedia projects is available at hover>Special:MyLanguage/Beta Features/Hovercards|Page Previews.

== Dependencies ==

This extension has a hard dependency on  and . There are also optional dependencies on  (without BetaFeatures, it loads for all users), and  and  (for instrumentation).

Installation

 * Install the dependencies.


 * Enable the beta feature

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

Image
The image comes from the ext-pgimg>Special:MyLanguage/Extension:PageImages|Extension:PageImages which returns the single most appropriate thumbnail associated with an article. It ignores maintenance templates, stubs, flag icons etc.

Text
The text comes from the ext-txtextract>Special:MyLanguage/Extension:TextExtracts|Extension:TextExtracts from which a plain-text extract is requested (see that extension for exclusions). [https://phabricator.wikimedia.org/diffusion/EPOP/browse/master/resources/ext.popups.core.js;2c17c7dcffb665eba0a7a630872c05170b5d9041$48 Two 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 [<tvar|git-popups-max>https://phabricator.wikimedia.org/diffusion/EPOP/browse/master/resources/ext.popups.core.js;2c17c7dcffb665eba0a7a630872c05170b5d9041$110</> 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
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 :

Renderers
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 <tvar|js>ext.popups.renderer.article.js</> or this [<tvar|url>https://gerrit.wikimedia.org/r/#/c/139827/</> patch that adds a renderer for references].

Known problems
Users of the Translate extension should note that page previews will default to the user's local language in some cases on long translateable blocks of text where translate tags wrap content in multiple sections. If you are experiencing issues, you should consider marking up individual sentences in your lead section.

The task T167852 is for a technical audience but has more information on the underlying problem.

Why can't I copy and paste text from a preview?
At time of writing, the cons of doing so outweigh the pros. Essentially it boils down to decreasing the touch area to read the article in full. Once page previews is deployed on English and German Wikipedia, feel free to reopen this task and reignite the discussion, but right now we have no plans.

How can I remove content from a page preview?
TextExtracts will strip any element that is marked with the class noexcerpt. This is provided by the global wgExtractsRemoveClasses.