Topic on Talk:Reference Tooltips

Hi, I'm a developer active in Russian Wikipedia. We've reworked ReferenceTooltips significantly in our wiki, and I would like to suggest other wikis to update to our version. (Maybe a global gadget would be a better solution, I would welcome such an initiative if the community agrees.) It was developed by me; Facenapalm, Serhio Magpie, IKhitron, Iniquity, Saint Johann helped in testing.

Here it is: w:en:User:Jack who built the house/Gadget-referenceTooltips.js (English translation) / w:ru:MediaWiki:Gadget-referenceTooltips.css.

Changes list:

• Tooltip style & animations are updated to be consistent with Page Previews' style & animations.
• The following bugs & flaws are fixed, among others (gif/png):
  • a bug that sometimes appears when hovering a reference link a second time,
  • a sporadic bug that appears when clicking inside a tooltip in Chrome,
  • a bug that appears when resizing the window,
  • a similar bug that appears when the tooltip is activated by clicking,
  • a bug that involves fast multiple clicks on a reference link,
  • the noncentral position of a tooltip tail above/below a reference link,
  • a bug where you sometimes can't remove a tooltip called from inside another tooltip.
• Hopefully I did not introduce any new bugs.
• Harvard-style citations are now supported (the script looks for "#CITEREF" links; CSS selectors are adjustable via a variable).

• Tooltips inside tooltips are now working properly (they did work before, but there were bugs associated with this behaviour). See the animation.
• An option is added that allows to convert native browser tooltips for titled <abbr> tags and such into gadget tooltips. It is default on touch devices, allowing users of the desktop version on such devices to see them.
• The settings dialog is rewritten using OOUI (its modules are loaded on demand) and looks similar to the Page Previews settings dialog.
• Saving settings doesn't require page reload anymore.
• The code is refactored. Tooltips & elements having them are objects now. The script used jQuery and pure JavaScript inconsistently – now it uses the first everywhere where appropriate (performance losses are negligable).
• Old IE support is removed (JavaScript isn't loaded to them anyway).
• The coding conventions are applied.

Some details about installation:

• You will need to translate interface messages to your wiki language.
• Every wiki can have its own set of elements for which tooltips are applicable (for example, harvard-style links in enwiki & ruwiki have "CIREREF" prefix in fragment links, but this can be not universal). You can set custom CSS selectors for regular tooltips and for tooltips converted from native tooltips in corresponding variables.
• Every wiki can have its own set of namespaces where reference tooltips are appropriate (tooltips for <abbr> tags are considered appropriate everywhere if switched on). (Removed the namespace check for now.)
• The gadget is dependent upon Page Previews' classes to show/hide tooltips: .mwe-popups-fade-in-down and such. The code is not so short, so they weren't incorporated into the gadgets. If the classes would be renamed/removed some time, you would have to add them manually. (The animation doesn't work with Page Previews off, so I added them to the CSS.)

Looks good. I notice a few bugs that were introduced:

• The space to the sides of the popup's "tail" is no longer counted as part of the popup for mouseover purposes. This causes the popup to frequently disappear before the user can move their mouse towards it, especially in cases where the "tail" isn't immediately above where the mouse started, meaning that if the gap isn't covered quickly enough, there will be a frustrating disappearance.
• This isn't so important, but if the user clicks the settings button in the demo popup within the settings menu itself, there's no way to exit the menu, no matter how many times the "Cancel" button is clicked.

Note that the gadget still works, but without the animation, when Page Previews is disabled via preferences.

@Yair rand: thank you for the original version of the gadget and thank you for the notes. The first one seems legit, although it is the case for Page Previews also. I fixed it. The demo tooltip bug is fixed too. As to the animation, I checked it some time ago and found that the classes work no matter Page Previews is enabled or disabled. Now it changed apparently, so I added the classes to the gadget's CSS.

One question: in your version there is a namespace check. Is it there because in some namespaces the gadget is undesirable, or is it there because in most namespaces there is just no need for it? If it is the second, I don't see good reasons for that restriction as references appear from time to time in much more namespaces than the main namespace, "Project", "Help" and "Draft". I removed the namespace check for now.

@Jack who built the house: The namespace check was added in 2011 by @Kaldari, with the intention of "trying to cut down js bloat for other pages", which seems reasonable. It might be preferable to add some more namespaces to the list, but the gadget certainly doesn't need to run in the Special namespace or Module namespace, for example. Or maybe it should be changed from a whitelist to a blacklist?

In the Module namespace, refs may appear in docs, and they do. As for the Special namespace, you are probably right. A check for the wgIsArticle wgAction config value could also be useful. Nevertheless I don't really see much gain here as it will only save us a time needed for running 2 selectors (by default).

On my old notebook in the watchlist with 500 last changes the script runs with no effect for 8ms. On modern machines it's even quicker. So I guess the gain of the script not running where it has no effect is comparable to the price of loading additional lines of code (and for most users who only read Wikipedia, which means they don't visit special pages or page history, it has no effect). So I don't see any clear benifits and will leave the code unchanged for now.

It looks great, thanks for the update and the support of Harvard-style citations!

While translating it, I noticed an orphan bracket at the end of 'rt-tooltipsForComments'.

If possible, it would make the translation easier to keep the translation text at the beginning of the code, like in the original Reference Tooltips code.

Could it be made so that it shows on the bottom of the ref like Page Previews (see meta:WMDE Technical Wishes/ReferencePreviews) (an advantage is that it doesn't hide the text of the sentence) and with the same exact animation?

@The RedBurn: > While translating it, I noticed an orphan bracket at the end of 'rt-tooltipsForComments'.
That's a Google Translate bug.

> If possible, it would make the translation easier to keep the translation text at the beginning of the code, like in the original Reference Tooltips code.
Done.

> Could it be made so that it shows on the bottom of the ref like Page Previews (see meta:WMDE Technical Wishes/ReferencePreviews) (an advantage is that it doesn't hide the text of the sentence) and with the same exact animation?
I'm afraid I can't understand what you mean here.

@Jack who built the house

> That's a Google Translate bug.

Indeed, my bad.

> Done.

Thanks!

> I'm afraid I can't understand what you mean here.

Yes, I should have said "below": the Page Previews pop-up shows up below the link, as you can see here. Could the same thing be achieved with Reference Tooltips, since it's mentioned on meta:WMDE_Technical_Wishes/ReferencePreviews#Requirements_for_a_solution?

Page Previews are shown above the link by default as well. They are shown below only when there isn't enough space above. To make them appear below you could change the following condition: teOffset.top < this.$element.outerHeight() + $window.scrollTop() + 6.

Indeed, so Reference Tooltips already meets that requirement. :-)

@Jack who built the house

Could you make an English version? I don't think translating with Google Translate is enough.

If it's any help to you, Jack who built the house or anyone, here's the French translation I made: Utilisateur:The_RedBurn/ReferenceTooltips-fr.js

Can you also make English translation?

English translation: en:User:Jack who built the house/Gadget-referenceTooltips.js. Feel free to improve by posting better translations here.

It looks great! Is it possible to put mw.util.addCSS below the translation text to make translations easier?

You're right: I changed the link to only-JS version. CSS needs no changes.

Perfect, thanks!