Page MenuHomePhabricator

Hovercards should always appear adjacent to the linked area (instead of relative to the mouse cursor) to prevent "dead" space between link and hovercard
Closed, ResolvedPublic

Description

Screenshots to illustrate the bug

Currently hovercards appear relative to the mouse cursor.
That means depending on the initial location of the cursor the hovercard is shown closer or farer away from the link (see first two screenshots in attachement).

In the second case (hovercard shown farer away from the link) this leads to an issue: There is some "dead space" between the linked area of the link and the linked are of the hovercard.

If one moves the mouse (not too fast) from link to hovercard in this case the hovercard dissappears before the cursor actually reaches it.

The easiest possibility to solve this issue would probably be to show hovercards always adjacent to the linked area (e.g. the hovercards tip touching the link)

(Tests above with Firefox 29.0.1 on Windows 7)


Version: unspecified
Severity: major

Attached:

Details

Reference
bz66317
Related Gerrit Patches:
mediawiki/extensions/Popups : masterRemove dead space

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:24 AM
bzimport added a project: Page-Previews.
bzimport set Reference to bz66317.
bzimport added a subscriber: Unknown Object (MLST).

Hovercards used to work like that, but there were problems when the link spanned multiple lines. (bug 63159) Hence it was changed to be relative to the mouse cursor.

The easiest way to solve the issue with the hovercard disappearing too quickly, will be to change the on/off timing to 500ms (from 150ms), bug 66301

Increasing the timing will surely make this issue less probable but it will not really fix it (imagine grandma slowly but steadily moving her finger on her newly purchased laptop trying to reach this exciting hovercard that has just popped up... but sadly never reaching it)

Wouldn't it be possible to combine both approaches:

  • get x-coordinate from mouse cursor
  • set y-coordinate relative to linked area.

After five minutes of googling I'm pretty sure it should be quite easy to prevent reintroduction of bug 63159 by just properly using the JavaScript function "getClientRects()" [1] to identify the part of the link the mouse is located over and calculate the correct vertical position.

[1] https://developer.mozilla.org/en-US/docs/Web/API/element.getClientRects

Jaredzimmerman-WMF triaged this task as High priority.Dec 3 2014, 12:29 AM
Jaredzimmerman-WMF set Security to None.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 28 2015, 3:42 PM
bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-57-The Fifth Element board.
Jdlrobson removed bmansurov as the assignee of this task.Oct 1 2015, 8:51 PM
Jdlrobson added subscribers: bmansurov, Jdlrobson.

Change 243946 had a related patch set uploaded (by Bmansurov):
Remove dead space

https://gerrit.wikimedia.org/r/243946

Jdlrobson lowered the priority of this task from High to Low.Oct 7 2015, 6:10 PM

Take a look at @Patrick87 's comment https://phabricator.wikimedia.org/T68317#710980 - he's also helpfully commented on the Gerrit commit.

phuedx added a subscriber: phuedx.Oct 9 2015, 9:03 AM

IIRC if I don't actually use the image anywhere then I can't share the URL or something…

I requested some tests on the patch given the code size. Apart from that though I think the result looks good!

Change 243946 merged by jenkins-bot:
Remove dead space

https://gerrit.wikimedia.org/r/243946

Jdlrobson closed this task as Resolved.Oct 16 2015, 4:24 PM