Talk:Beta Features/Hovercards

Jump to: navigation, search

About this board

Edit description

The Hovercards beta feature solves the core problem of users opening multiple tabs to gain an understanding of a word in the context of the subject they are reading. Whenever a reader hovers over a link to another article, a short summary of the subject, including its graphical image, is provided to them so they can decide whether they need to visit that subject more fully before continuing the current subject.

Please give us feedback on your experience using this beta feature so we can change and improve it. Each language is welcome in this discussion!

You can read more about the feature here.

Known Issues

By clicking "Add topic", you agree to our Terms of Use and agree to irrevocably release your text under the CC BY-SA 3.0 License and GFDL
Inalol (talkcontribs)

Okay if you get too much content, you can turn this feature off.

Reply to "Too much content"
Munichviolin (talkcontribs)

In german articles if you get a preview it's often too less content to understand. It would be very useful, if the Hovercard would view the whole first passage of the linked article, wich ususually contains the most needed information. But at the moment it mostly shows the last viewed sentence cut off at the middle an its often too less information. I think the boxes could be much bigger (both higher and wider); on the most devices there would be enough space for that.

Inalol (talkcontribs)

Yes, I think you are right.

Reply to "Too less content in the Preview-Box"

Horizontal gradient – HTML5, CSS and JavaScript code/formatting issues

Summary by Edwardj 123

This topic is for discussion of the computer code used to display the Page Previews/Hovercards feature, mainly issues with HyperText Markup Language version 5 (HTML), Cascading Style Sheets (CSS) and JavaScript (JS).

Edwardj 123 (talkcontribs)

After a quick look at the Page Previews/Hovercards HTML5 code, I noticed that the CSS frequently uses pixels which is bad because it's an absolute/fixed unit so doesn't change on different screen sizes, browsers and devices (requiring extra media query code to fix this). Using relative units, a feature of responsive web design, is a simpler and better approach which is already used for most MediaWiki web page formatting and should be used here.

The main responsive relative units which should be used are em/rem (based on font size) and percentage widths (%). Also, this problem isn't just about element lengths; the font size of the hover box uses pixels too, which can look bad on different screens. Using "em"/"rem" for the font size (relative to element and browser font sizes) is best.

Edwardj 123 (talkcontribs)

Another issue is the summary image inside the Page Previews container being too tall when displayed horizontally (it overflows slightly). For example, a link to demonstrates this issue, showing the image sticking out downwards by a few pixels. This should just be a quick Cascading Style Sheets fix - making the image have a maximum height of the container's height (e.g. max-height: 100%) and ensuring nothing else can overflow or cause scrollbars.

TheDJ (talkcontribs)

Reported this particular issue (overflowing summary image) as T153840.

Tshons (talkcontribs)

HTML/JavaScript/CSS is enabling me to save Academic Information Pages as is. Enabling us to access this valuable data for all free and self-actualization Because of Java and HTML l'm accessing and saving data as page documents. Thanks to Wikipedia.Org and latest technologies for 21st century,(CISCO/MICROSOFT etc) Marry Christmas and Happy New Year 2016-17/20.

Edwardj 123 (talkcontribs)

I recently spotted a visual problem with the horizontal gradient (which is used to show the article content continues) at the end of the article description text: its large height causes it to cover part of the previous line.

After checking the HTML code, I found the problem. The text line height is set to 20px and the gradient pseudo-element has the height 24px. The pseudo-element should be the height of a line of text (20px here). To prevent the issue happening again if the text font size changes, the height should be set to "1em".

Please fix this minor issue - an image showing my screenshots of the problem is available at and any article with a tall letter such as "g" on the end of the second last line of the Page Previews/Hovercards text should cause this problem.

OVasileva (WMF) (talkcontribs)

@Edwardj 123 - thank you for pointing this out, filed a bug and lined up for the next sprint (should be fixed within 2 weeks).

Edwardj 123 (talkcontribs)

Closed duplicate issue Minor bug: horizontal gradient also affects the forelast row (

Reply to "Horizontal gradient – HTML5, CSS and JavaScript code/formatting issues"

Minor bug: horizontal gradient also affects the forelast row

Summary by Edwardj 123

Now tracked in Phabricator. For details see my topic "Horizontal gradient – HTML5, CSS and JavaScript code/formatting issues", starting with the comment at

Fixuture (talkcontribs)

e.g. see the hovercard for W:Collective intelligence: the "g" of "sociobiology" is affected by the gradient as well. Maybe it can be set on the last word only. Alternatively the max-height or alike could be changed.

Edwardj 123 (talkcontribs)

Now tracked in Phabricator. For details see my topic "Horizontal gradient – HTML5, CSS and JavaScript code/formatting issues", starting with the comment at

make the hoverzoom boxes show more

Rhodechill (talkcontribs)

need more info! less file descrptiony stuff too.

Whatamidoing (WMF) (talkcontribs)

Welcome, Rhodechill.

I'm a bit confused about the "file description stuff". Are you talking about Hovercards (a sentence or two when you hover on a blue link to another article) or maybe Media Viewer (full-size pictures when you click on an image)?

Rhodechill (talkcontribs)

when u hover over a hyperlink and a preview comes up, usually has like 2-4 sentences and a thumbnail maybe iirc

Whatamidoing (WMF) (talkcontribs)

I assume that you want to see more sentences. But I don't know what you want to see less of ("less file descrptiony stuff too" from your first comment). Perhaps that is a less important point?

Rhodechill (talkcontribs)

hey! now i can see a hoverzoom box from another hoverzoom box awesome!

as for despcitoony stuff:

like this, i went to a random article, the zoom box says:


9.7kB, 106 wikiLinks, 5 images, 2 categories, 25 weeks old

Qakh District ( ; – K′axis raioni),"

lik the pronunciation and the date there is a bit much, its actually more than 50% of the info provided, and thats just attempt #1 from a random page

is my sugestions even useful at all idk

Whatamidoing (WMF) (talkcontribs)

Right. Look at this:

There are two different previews showing. Now go to w:en:Template:Administrative_divisions_of_Azerbaijan and hover over the entry for "Qakh". Which preview are you seeing – the one with the big picture, or the one with the menus and the line about file size and age?

Rhodechill (talkcontribs)

the lower one in your image. however mine has a tiny thumbnail, too.

for most other links, i see both.

is my contribution useful

Whatamidoing (WMF) (talkcontribs)

Thanks, that's very useful information. You're not using Hovercards. You're using w:en:WP:NAVPOPS. NAVPOPS is a very popular browsing gadget at the English Wikipedia (and some other wikis).

Rhodechill (talkcontribs)

Is my suggestion going to be implemented?

How did I get navpops and not hovercards? do I have both? how do i get cards?

Whatamidoing (WMF) (talkcontribs)

You get NAVPOPS by going to the Gadgets tab of your preferences and ticking the box to enable it.

NAVPOPS is maintained by a volunteer. If you want the appearance to be different, then you should first read and, if the change that you want to make isn't possible there, then you should leave a message on the talk page there.

Rhodechill (talkcontribs)

how do i get hover cards then?

Whatamidoing (WMF) (talkcontribs)

Go to (for the English Wikipedia), and choose the second item, "Page previews".

Rhodechill (talkcontribs)

I already had both hovercards and navpops. why did you say i wasnt using hovercards?

also, is that talk page ordered in reverse chronological order or is it just me? the one u linked to april 19

Whatamidoing (WMF) (talkcontribs)

Are you seeing two cards/boxes for every link? Or just one?

Rhodechill (talkcontribs)

is that talk page ordered in reverse chronological order or is it just me? the one u linked to april 19

And I was seeing two boxes. I am pretty sure it was hovercards and page previews or whatever the other one was. You seemed to imply I didn't have hovercards which confused me hence me asking ''how do I get hover cards then?

''. I don't think I did have hovercards tho? Then how did I have two boxes? Glitch? Hmm, maybe I did have hovercards when I thought I didn't have them... idk. What do you think about all of this???

Rhodechill (talkcontribs)

lol Edwardj Yes I like to avoid spelling mistakes.

Reply to "make the hoverzoom boxes show more"

Summary should finish with full ended sentence

Avonsoda (talkcontribs)

I think it would be cleaner to look at these Hovercards if they finished with the end of a sentence. In my opinion an unfinished sentence always results in clicking on the link – which makes the Hovercard useless because I want to see the end of the sentence to understand what an article is about.

To give you an example, this is what I get after hovering over "Anisa Mohammed":

Anisa Mohammed is a Trinidadian cricketer. A right-arm off spin bowler, she has played for both the Trinidad and Tobago and the West Indies women's cricket teams. Since her international debut at 14 years of age she played in 101

Who wouldn't want to know where she played in?

When reading only "Anisa Mohammed is a Trinidadian cricketer. A right-arm off spin bowler, she has played for both the Trinidad and Tobago and the West Indies women's cricket teams.", I might have gotten everything I wanted to know.

Edwardj 123 (talkcontribs)

The reason this is done must be these two main reasons:

  1. sentences vary in length (some are very short, some long) so the Hovercard/Page Preview could end up too big/small
  2. it could be difficult and cause disagreement choosing which sentence to stop at, with a summary text possibly failing to include enough information

I hope you understand my points that may be why your method isn't used.

Reply to "Summary should finish with full ended sentence"

Hovercards don't show the section of a page that the link specifies

Summary by Edwardj 123

There are many articles containing hyperlinks that go to a specific section of a page when clicked because the other content isn't relevant, so users typically read this content first to understand the topic referenced. The Page Previews/Hovercards feature currently only previews the first section introducing the whole article, which some users would like changed so they can read a summary of the specific section that an article references.

Gluons12 (talkcontribs)

Often, there are links that point to a specific section of a page, but the hovercards always preview only the lead section. Is that by design, or is there work going on so that it previews individual sections as well?

CKoerner (WMF) (talkcontribs)

This is by design, but section previews would be an interesting feature. Pinging @OVasileva (WMF) to share your thoughts with the product owner. :)

Edwardj 123 (talkcontribs)

The Page Previews/Hovercards feature was designed to do that - it's meant to show previews of articles, with the main introduction content only. Showing a specific section seems worthwhile though if the link specifies it as a link anchor (using a fragment identifier) because clicking the link would jump to that part of the page. In that case, a summary/introduction to the part would be useful. I think this functionality has been mentioned before but I don't know how much work has been done for it.

OVasileva (WMF) (talkcontribs)

Hi - we haven't done any work on this functionality so far, but currently it is in our list of tentative improvements for the feature after initial rollout - you can look over the highlights of the list here. Also - if you have any ideas for other future improvements, we are tracking them in the "Hovercards Pt 2" page in phabricator.

Edwardj 123 (talkcontribs)

I've spotted some other topics discussing the same idea:

Edwardj 123 (talkcontribs)

I've noticed the following Phabricator pages mentioned in related topics for this problem: (talkcontribs)

This will never truly work 100% nor can it be expected to, for many reasons:

  1. Sections are case sensitive - this is even worse than articles, so while Cat and cat links may lead to the same article, as anchors they wouldn't lead to the same section.
  2. Sections don't need to be unique -if you have "Einstein#Schools" and "Einstein#Schools", the first may lead to primary schools, and the second may lead to high schools within the same article. Yet they will share the same anchors. Mediawiki may generate them differently for headings, but most editors probably don't know that and probably won't care to update millions of articles just for "page previews", especially when there's currently no way to detect when these "break".
  3. Inconsistency - same page link showing different descriptions. One here has to remember that 99% of most readers don't know what anchors are, nor how they work. Hovering over one link and getting something, and hovering over a similar link and getting something else is inconsistent and confusing.
  4. Other tools also generate anchors - the math extension generates an anchor that points to its markup, which can also conflict with article anchors, and will surprisingly just have a formula rather than article text. The same applies to tables and many html elements, which would look pretty bad on a small preview.
  5. Sections may also contain unbalanced or unclosed html, tables, and crazy translate markup, and may lead to broken previews.
  6. Sections are unstable - because of the way wikitext markup works a section can automatically change every time the page is edited, e.g. =={{REVISIONTIMESTAMP}}==

This idea should probably be rejected in the general tool for all wiki users (including millions of readers). If deemed useful, it could be implemented solely as a gadget for editors who may be willing to deal with all these issues.

Reply to "Hovercards don't show the section of a page that the link specifies"

12 May 17: Missing Hovercard preview text issue

Careful With That Axe, Eugene (talkcontribs)

I have had Hovercards enabled for over a year. This morning several of the prominent links on the Main Page are not working, displaying "

Looks like there isn't a preview for this page

Read" with a sad-face icon. These are links which yesterday were producing Hovercards just fine. Has something changed or could it be a local issue?

Tamwin (talkcontribs)

Yeah, me too. By the way, I'm seeing it on en:wp, I don't know where you're having the problem. It isn't consistent, only affecting some pages. I don't have enough technical experience to have any clue what's going on, but might it be some kind of database or cache problem?

JJBers Public (talkcontribs)

It seems to be a issue on the Featured Article, the Kuiper belt. I noticed it's gone to other pages that used to work fine before. It may have started today as well, as the hovercards were working fine before.

TheDJ (talkcontribs)

This issue was reported earlier today as phab:T165172 and phab:T165161. A fix is rolling out as we speak.

Reply to "12 May 17: Missing Hovercard preview text issue"

Display lead sentence of #Section, rather than of article intro

Unitof (talkcontribs)

When an article links to a specific section of an article, rather than the general article, should we display the lead sentence (and possibly even photo) of that specific section:

Example: the Hovercard for the link Year#Besselian year in the Universal Time article displays:

A year is the orbital period of the Earth moving in its orbit around the Sun. For an observer on the Earth, this corresponds to the period it takes the Sun to complete one course throughout the zodiac along the ecliptic."

but I believe it would be more helpful if it instead displayed

The Besselian year is a tropical year that starts when the (fictitious) mean Sun reaches an ecliptic longitude of 280°.
Fixuture (talkcontribs)

See this:

Edwardj 123 (talkcontribs)

There's another more recent topic discussing this issue at, called "Hovercards don't show the section of a page that the link specifies". I have also added links to other topics discussing the same problem there.

Reply to "Display lead sentence of #Section, rather than of article intro"

Is "Looks Like There Isn't A Preview" always needed?

PsamatheM (talkcontribs)

I'd suggest that rather than a pop-up saying "Looks Like There Isn't A Preview for this page" don't pop-up anything. (i.e. if nothing useful to say, say nothing) - because I'm seeing a lot of these and it's driving me mad (so I'm stopping using the thing. ~~~~

Reply to "Is "Looks Like There Isn't A Preview" always needed?"