Page MenuHomePhabricator

Conflict of page preview and link tooltip
Open, NormalPublic

Description

Some Wikipedia templates show specialized tooltip. As you can see on the picture below, e.g. small periodic table does this. But it does not work really well with Page previews.

Also some images may be wrapped in a link. The hovercard will thus make it impossible to see their tooltip.

How should we deal with this issue? How to detect users with Page previews turned on and do not show tooltips to them? Or how to mark some code to not show a Page preview over its links? Or mark the whole template?

These tooltips for links are made by span inside a link: [[link|<span title="tooltip">title</span>]], see periodic table element template for example

Steps to reproduce:

  1. Login on https://cs.wikipedia.org/
  2. Enable Page Previews - https://cs.wikipedia.org/wiki/Speci%C3%A1ln%C3%AD:Nastaven%C3%AD#mw-prefsection-betafeatures
  3. Go to https://cs.wikipedia.org/wiki/Sod%C3%ADk
  4. Hover over any element on periodic table

Same steps work also for German Wikipedia and some others

Developer notes

Options:

  • Disable page previews for any link with a child element
  • Disable page previews for any link with a child element that is an image
  • Do nothing

Event Timeline

Dvorapa created this task.Jun 30 2017, 9:25 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 30 2017, 9:25 PM
Dvorapa updated the task description. (Show Details)Jun 30 2017, 9:26 PM
Dvorapa added subscribers: Vachovec1, Urbanecm.
Dvorapa updated the task description. (Show Details)Jun 30 2017, 9:28 PM
Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)Jun 30 2017, 9:30 PM
Dvorapa updated the task description. (Show Details)Jul 1 2017, 9:16 AM
ovasileva triaged this task as Low priority.Jul 4 2017, 4:42 PM
pmiazga updated the task description. (Show Details)Jul 4 2017, 4:49 PM
pmiazga updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)Jul 4 2017, 5:31 PM
Dvorapa updated the task description. (Show Details)

Interestingly, I'm seeing the default tooltip for the periodic table elements.
With respect to images, I would suggest that we disable page previews on any links that contain images. I'm not sure it's helpful in that situation.

Textbook example of horrible collision between tooltips and Page Previews which I just met:

See the map at the page Seznam rozhleden na Slovensku at cs.wiki. Try to hover over the pogs on the map first with PagePreviews disabled, then with PagePreviews enabled. With PagePreviews disabled you see a tooltip with the name of the observation tower (anchored to the "id"ed item in the table above the map). With the PagePreviews enabled you see a "preview" which shows .... almost nothing. The links are provided through the image link parameter (probably the same case as above).

Jdlrobson raised the priority of this task from Low to Normal.Feb 22 2018, 10:29 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

What do we want to do here?
To repeat my position before "With respect to images, I would suggest that we disable page previews on any links that contain images. I'm not sure it's helpful in that situation."
We may want to go further and disable page previews for any link which contains another element.

Bumping to normal to get a decision for this.

In the example in description there is span (not image) inside link in every single square of periodic table of chemical elements. The span holds the tooltip info, as you can see here. But sure, the merged task was also about image. But I should note the tooltip in the example case is showing basic info, which is partially substituable by page previews. But how to show tooltips only when previews are off, there is no option.

I would suggest another solution: Disable page previews for any link with a child element that has got its own tooltip (as it overrides the tooltip of the parent link)

Have we seen any other cases where this comes up? @Jdlrobson - do we have an example of a similar bug with images?

This comment was removed by Dvorapa.
Restricted Application added a subscriber: Zoranzoki21. · View Herald TranscriptFeb 28 2018, 5:42 PM

Can we create a css class, lets say no-preview, and then update PagePreviews logic to not trigger page previews logic for link elements with no-preview class or even better create an html5 attribute data-preview="disabled" and use it while detecting hover over element?

Then, the second step would be to update the templates like the periodic table template and necessary class|attribute.

This should only impact links which contain other elements as we disable the title attribute of links during the hover process.

Easiest thing to do is disable page previews on links that contain children e.g. img. and document this decision.

I don't think we need to create more complexity in the code with new classes.

TheDJ added a subscriber: TheDJ.Mar 12 2018, 12:30 PM

Can we create a css class, lets say no-preview, and then update PagePreviews logic to not trigger page previews logic for link elements with no-preview class or even better create an html5 attribute data-preview="disabled" and use it while detecting hover over element?

As noted elsewhere, "nopopups" already exists for this exact purpose for Navigation-Popups

TheDJ added a comment.Mar 14 2018, 9:28 AM

This problem doesn't really play much at en.wp because we don't use title attributes for displaying content. Note how Location map there uses labels instead of title attributes. Traditionally the title attribute was not represented very consistently between the browsers, so it was avoided for that reasons back in the day (i think it's better now, not sure). title attributes still generally don't print though, so another reason to avoid them.

But yes, marking with nopopups was the way to avoid such clashes in Wikipedia