WMDE Technical Wishes/ReferencePreviews

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

Reference Previews[edit]

Example of a Reference Preview.png
A little video explaining the problem and the solution

The Reference Previews feature shows a preview of a footnote when you hover over or click its footnote marker. The feature is currently a beta feature.


Jumping down to the footnote section makes you lose the reading position, and it is sometimes hard to get back up and find the position where you came from. An idea to solve this problem is to have previews for footnotes.

This wish was request no 1 from the German-speaking community's wishlist survey in summer 2017, but it has been discussed since 2014 on Phabricator (T67114) and the functionality exists as a gadget in many wikis.

Please note that this project is scoped to desktop only, since there is a mobile solution already.


Gadget for previewing footnotes on en.wikipedia.org
Gadget for previewing footnotes on nl.wikipedia.org

Current situation[edit]

Several wikis, like en-wiki, nl-wiki or de-wiki have gadgets that create pop-ups when you hover over a footnote marker (sometimes configured as a default feature for all users). Many of them are based on the Reference Tooltips gadget, developed by Yair rand.

Without a gadget, you have to click on the footnote number to read the content of a footnote.

  • On desktop, you jump to the bottom of the page, which can disturb your reading flow. You can get back to your previous position, but you still leave the article section in order to look at the footnote.
  • On mobile, the footnote is shown at the bottom of the screen. This feature is available in the mobile view of all wikis.

Related projects[edit]

  • Page Previews are activated on all Wikipedias and Wikivoyages. Several wikis have gadgets for page previews.
  • Footnote highlighting, implemented by the Technical Wishes team, makes it easier to find your way back up from a footnote.

Conversations with Wikipedians[edit]

We gathered insights and feedback around the project idea at Wikimania and German WikiCon 2017. Main outcome:

  • This wish isn’t considered controversial. It would be good to have pop-ups as a feature for everyone, several wikis already have gadgets for that.
  • The en-wiki and nl-wiki gadgets were named as good examples several times (see screenshots).

Tests with readers[edit]

The look and behavior described below were received well in first tests with readers. We’re hoping to get lots of feedback from contributors during the beta phase.


The feature is part of the MediaWiki extension Popups, which is used for Page Previews.

Coordination and implementation of this wish is done by the Technical Wishes team at Wikimedia Deutschland, with support from the WMF’s Reading Web team. The design for this feature is being developed by the WMF.

Look and behavior[edit]

Reference Previews elements.png

This is the scope of the very first version of this feature. More functionality may be added in the course of the beta phase, depending on the incoming feedback.

  • The pop-up opens when you hover over or when you click on a footnote marker.
  • It gives a preview of the footnote as it is shown at the bottom of the page. Inside the preview, all kinds of footnote content (text, images, tables, …) can be displayed.
  • Reference Previews look like Page Previews. This way, all pop-ups have the same design, no matter if you hover over a page link or a footnote marker.
  • At the top of the pop-up, the reference type is shown. (more info)
  • For short footnotes, the pop-up window adjusts to a smaller size. If the footnote size exceeds the maximum pop-up size, you can scroll to read the whole footnote.
  • Clicking on the link "Jump to reference" brings you to the actual footnote in the footnote section.
  • Links that are part of a footnote open in a new tab.
  • After the beta phase, a settings cog will take you to your user settings for this feature.

Displaying the reference type[edit]

First tests have shown that displaying the type of a reference can help readers evaluate its trustworthiness more quickly; e.g. a journal publication is more trustworthy than a blog post.

This is how the categorization works:

  • Currently there are four types of references defined:
    • Web Reference
    • Journal Reference
    • Book Reference
    • News Reference.
    • Apart from that there is always a generic "default" type, which is simply named Reference.
  • Technically speaking, the type of a reference is defined by CSS-classes, e.g. <cite class="journal"> for journal references. These classes are set in the <cite> element in a reference's content (more info).
  • On most wikis, you can assign a class to a reference by using templates. For example, the English {{cite}} templates specify their respective class already. Classes can be added to other templates as well.
  • Alternatively, you can add a cite class directly into a ref tag, e.g. <ref><cite class="book">reference content</cite></ref>.
  • References without cite tags and classes (e.g. plain <ref> tags) are shown as "Reference".


The preview uses JavaScript. If you don't have JavaScript activated, you'll get the current view, i.e.: Footnote markers are jump marks and there's no preview.

References or footnotes?[edit]

The feature is called Reference Previews and also speaks of "references" in the interface. It was discussed if it should be Footnote Previews and "footnotes" in the interface instead, because the feature previews not only references, but all kinds of footnotes. While this argument holds true, we stuck to "references" for the following reasons:

  • Technically, footnotes are based on references: To create a footnote with wikitext, you need to use the <ref> (references) tag.
  • When you're inserting a citation with Visual Editor, the word "footnote" isn't showing at all. Instead, the interface speaks of citations and references.
  • The gadget which is in use across many wikis is called “Reference Tooltips” as well.

Deployment roadmap[edit]

These are the deployment dates for the Reference Previews feature:

Beta feature

  • test.wikipedia.org: 2019-02-28 YesY
  • German Wikipedia: 2019-04-04 YesY
  • Arabic Wikipedia: 2019-04-04 YesY
  • all wikis that use the Popups extension:
    • all Wikipedias: 2019-10-24 YesY
    • en, zh and he Wikivoyages: 2019-10-24 YesY

Try the beta feature[edit]

If you want to try the beta feature, you have to activate it in your settings.

Reference Previews and gadgets[edit]

Please note:

  • If you’re using the Navigation Popups gadget, you won’t see Reference Previews.
  • If you’re using the Reference Tooltips gadget, both pop-ups from Reference Tooltips and from Reference Previews will appear.

It’s recommended you turn these gadgets off in order to try Reference Previews.



As always, your feedback is welcome on the talk page!