Talk:Reference Tooltips

Jump to navigation Jump to search

About this board

References Tooltips reworked; feel free to update!

16
Jack who built the house (talkcontribs)

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:ru:MediaWiki:Gadget-referenceTooltips.js / w:ru:MediaWiki:Gadget-referenceTooltips.css.

Changes list:

  • 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 the 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.
Jack who built the house (talkcontribs)

Some details about installation:

  • You will need to translate interface messages to your wiki language. Hope Google Translate helps.
  • 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 constants.
  • 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.)
Yair rand (talkcontribs)

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.

Jack who built the house (talkcontribs)

@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.

Jack who built the house (talkcontribs)

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.

Yair rand (talkcontribs)

@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?

Jack who built the house (talkcontribs)

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).

Jack who built the house (talkcontribs)

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.

The RedBurn (talkcontribs)

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?

Jack who built the house (talkcontribs)

@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.

The RedBurn (talkcontribs)
Jack who built the house (talkcontribs)

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.

The RedBurn (talkcontribs)

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

PlavorSeol (talkcontribs)
The RedBurn (talkcontribs)
PlavorSeol (talkcontribs)

Can you also make English translation?

Reply to "References Tooltips reworked; feel free to update!"
Evolution and evolvability (talkcontribs)

Hello,

I'd like to add this extension to Wikiversity. What are the steps to add it?

Yair rand (talkcontribs)
Reply to "Activating on Wikiversity"
Coyote897 (talkcontribs)

Hi, on a 3rd party mediawiki site I have installed the script as per the instructions (as far as I can tell) but I am not able to get the pop-up functionality working. I would really appreciate some assistance please.

I have installed both manually (according to the instructions) and via export and special page import from here: https://en.wikipedia.org/wiki/Special:Gadgets/export/ReferenceTooltips

In total I now have relevant script on all the following pages:

https://www.domain.com/x/User:Yair_rand/ReferenceTooltips.js

https://www.domain.com/x/User:Yair_rand/ReferenceTooltips.css

https://www.domain.com/x/User:Louisa/common.js

[On the above page have tried: importStylesheet('User:Yair rand/ReferenceTooltips.css');

and:

/* Reference Tooltips. Version for testing before adding to gadget */

/* See en.wikipedia.org/wiki/User:Yair_rand/ReferenceTooltips */

/* Discussion: en.wikipedia.org/wiki/User_talk:Yair_rand/ReferenceTooltips */

importScript('User:Yair rand/ReferenceTooltips.js'); importStylesheet('User:Yair rand/ReferenceTooltips.css');

]

https://www.domain.com/x/User:Louisa/monobook.js

contains: importScript('User:Yair rand/ReferenceTooltips.js');

https://www.domain.com/x/MediaWiki:Common.js (just in case required)

[The following two urls contain the same code as their matching pages above.]

https://www.domain.com/x/MediaWiki:Gadget-ReferenceTooltips.js

https://www.domain.com/x/MediaWiki:Gadget-ReferenceTooltips.css

https://www.domain.com/x/MediaWiki:Gadgets-definition

The script appears as a gadget in preferences > gadgets.

I have cleared the browser cache by various methods.

The "Navigation popups" script is not installed on the server.

Yair rand (talkcontribs)

@Coyote897 Is the site publicly visible? If so, could you provide a link?

Also, does the javascript console show any errors?

Yair rand (talkcontribs)

@Coyote897 The JS console is showing "ReferenceError: importScript is not defined". Seems as though "importScript" is no longer always available at the start, so that line is breaking things. You could wrap it in mw.loader.using( 'mediawiki.legacy.wikibits', function () {} );, but since this is a gadget anyway, I think it would just work if you removed the importScript/importStylesheet lines from Common.js and the user js pages.

Coyote897 (talkcontribs)

@Yair rand Thankyou. Though do not seem to be getting a console error (at least with FF 52.0.2) I am still not able to get the script working. Please see here for a screenshot of the console while cursor is over a reference number.

I have tried the following:

a) Removing the importscript lines

b) Enclosing the importscript lines with the following:

mw.loader.using( 'mediawiki.legacy.wikibits', function () {

/* importscript line here */

} );

and the following variant (using the format of the line from the main wiki common.js)

mw.loader.using( ['mediawiki.legacy.wikibits'] ).done( function () {

/* Begin of mw.loader.using callback */

/* importscript line here */

/* End of mw.loader.using callback */

} );

c) And I have removed the full url in the importscript lines - so that it is back to the format in the instructions.

Is there anything I can set access wise, for the account I listed above - which would help you ascertain more. If so, please if you could copy the credentials so that I can delete them from the above post.

Yair rand (talkcontribs)

@Coyote897 Ah, the issue is that that page is in the userspace. By default, the script only runs in the main namespace, and the project, help, and draft namespaces. You can change this by modifying the line containing the text [ "", "Project", "Help", "Draft" ] in the JS code. The gadget seems to be working as expected in the main namespace of the site.

I've removed the credentials from your post and "deleted" the old revision, making it only visible to mediawiki.org administrators (which includes myself). If you want to further remove the content, the only people with the ability to do that here are Wikimedia Stewards (see m:Stewards).

Coyote897 (talkcontribs)

@Yair randThankyou so much for your generous attention in identifying what the issue was. I am so pleased to get the script working :) :) :)

As you wrote, I just needed to add "User" to the relevant line so as to add that namespace.

The script is working perfectly now.

Reply to "Not able to get script functioning"
SpikeToronto (talkcontribs)

How does one "hover" on a touch screen (e.g., iPad)? Thanks! — SpikeToronto 10:41, 15 May 2017 (UTC)

Reply to "Touch screens"

Ability to set 'hover' globally?

2
Sharonmk (talkcontribs)

I'm using this mainly in qupzilla 1.8.9 (a linux browser) where I have to click on the link to enable seeing the reference. When I try to change it to 'hover' I'm not able to change it as it seems to be locked onto 'click'.

However, when i look at the same page and reference in firefox, its showing as 'hover'!

Is it possible that this can be set globally in some form of configuration script or css such that you can set it to hover for every user please?

Yair rand (talkcontribs)

Unfortunately, there is no way for the script to determine whether the user has a mouse, so it defaults to "click" if the user has a touchscreen (as determined by presence of ontouchstart) even if the user also has a mouse. If the user only had a touchscreen, setting it to "hover" would make both the tooltips themselves and the settings menu inaccessible, so that's not given as an option when a touchscreen is detected.

Reply to "Ability to set 'hover' globally?"
TerraCodes (talkcontribs)
He7d3r (talkcontribs)
Reply to "Double loading styles"

"Double toolsip" for bibliography-style referenced articles/books?

1
2601:801:101:9C00:5549:9FA:7BC1:496C (talkcontribs)

Could the tool be easily modified to allow it to display a "second" level for articles that use the "bibliography style" reference list (example )? Or to automatically do this, if there is only a single "author/date pair" listed in the actual reference? Or even for a list, but that could get unwieldy for the user.

Reply to ""Double toolsip" for bibliography-style referenced articles/books?"

Working on IE and Firefox but not Chrome

2
Ikesultan (talkcontribs)

I'm working on windows 10 and am using this gadget on english wikipedia and when I use it on internet explorer or firefox it works as intended but on chrome it doesn't show on hover and on a click instead of sending to the reference link it shows you the tooltip. Any ideas?

Yair rand (talkcontribs)

My guess is that there's a touch screen which is for some reason only being recognized by Chrome. There's no way for Javascript to reliably detect whether the user has a mouse, so the script defaults to only reacting to clicks for users with touch screens (even if there also is a mouse available), so that the touchscreen-only users can still access the tooltips like that.

Reply to "Working on IE and Firefox but not Chrome"
Yusuf 506 (talkcontribs)

Reference Tooltips don't work?

Quiddity (WMF) (talkcontribs)

Hmm, I can confirm this is erratically functioning at this Trwiki article: tr:Mahatma Gandi. It didn't work at first, but after reloading I cannot reproduce... (the tooltips are now popping up, but there is a webconsole error TypeError: onSuccess is not a function)

I'm not proficient at JavaScript - I'd suggest asking the local Tr code expert to take a look at the differences between tr:MediaWiki:Gadget-ReferenceTooltips.js and en:MediaWiki:Gadget-ReferenceTooltips.js (perhaps using http://www.quickdiff.com/), in case they can see what needs to be updated.

Yair rand (talkcontribs)

I'm not seeing any issues on that article. Is the error still showing up? Which browser are you using?

Quiddity (WMF) (talkcontribs)

I can't reproduce at all, since seeing it briefly when I first tested at a few random articles. I'm now wondering if I was mistaken or testing too quickly. You'll have to wait for Yusuf 506 to confirm if he's still experiencing it. Sorry.

Reply to "Tooltips don't work"
Nenntmichruhigip (talkcontribs)
Yusuf 506 (talkcontribs)

That's exactly what

Reply to "Compatibility with w:en:Wikipedia:Tools/Navigation popups"