Page MenuHomePhabricator
Create Task
Maniphest T146691

[Bug] Mispositioned tooltip icon overlaps with "add qualifier" link and other elements
Closed, ResolvedPublic
Actions

Description

As shown in the image here:

Capture du 2016-09-26 22-05-30.png (133×345 px, 5 KB)

In French (and maybe other languages as well), the labels of the links (save/delete/cancel) are too long and the tooltip is pushed to the next line, where it makes very hard and sometimes to click on the "Add a qualifier" link (the whole line is unclickable, not only the part with the picture...)

A temporary workaround is to hide the tooltip alltogether in https://wikidata.org/wiki/Special:MyPage/common.css:

.mw-help-field-hint.wikibase-toolbar-item.wikibase-wbtooltip{
	display:none;
}

But it would be better that the bug doen't appear in the first place.

Bug seen in Firefox 48.0 on Ubuntu 16.10, with my regular account and another one without any personalizations.

Details

SubjectRepoBranchLines +/-
Do not wrap question mark icon to the next linemediawiki/extensions/Wikibasemaster+1 -0
Customize query in gerrit

Related Objects

Event Timeline

Ash_Crow created this task.Sep 26 2016, 8:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 26 2016, 8:16 PM
Ash_Crow added a project: Wikidata.Sep 26 2016, 8:18 PM
Thibaut120094 subscribed.Sep 27 2016, 12:25 PM
Dereckson added projects: MediaWiki-extensions-WikibaseRepository, Design.Sep 27 2016, 12:31 PM
Sjoerddebruin subscribed.Sep 27 2016, 12:32 PM

I've had the exact same issue suddenly this morning on Safari 10. It doesn't happen all the time.

Dereckson subscribed.Sep 27 2016, 12:33 PM

Design: an idea would be appreciated to efficiently show long links and tooltips, without hiding the other links by the tooltips.

Charlie_WMDE added subscribers: • Jonas, Lydia_Pintscher, thiemowmde, Charlie_WMDE.EditedSep 27 2016, 2:29 PM

I opened up a bug for this a while ago although mine was to only point out the interface design issue:

T139592

It's good to know that this is not just an aesthetic issue now.

@thiemowmde @Lydia_Pintscher @Jonas any idea how easily this is fixable?

Lydia_Pintscher merged a task: T139592: [Bug] Editing view has formatting issues in german language (maybe others too).Sep 28 2016, 12:29 PM
Lydia_Pintscher added subscribers: adrianheine, Jan_Dittrich.
Charlie_WMDE added a project: WMDE-Design.Sep 28 2016, 12:51 PM
Charlie_WMDE moved this task from Incoming to Incoming WD on the WMDE-Design board.Sep 28 2016, 1:34 PM
thiemowmde triaged this task as Low priority.EditedOct 6 2016, 4:22 PM

I believe the critical bug of the link not being clickable is fixed. I can see why this happened. The HTML element containing the question mark icon had no maximum width. It spanned the whole width (and blocked the link), even if only the first 11 pixels where visible. Since https://gerrit.wikimedia.org/r/312003 the width is limited to the first 11 pixels. The link behind the icon is clickable now.

It's an aesthetic issue now. Still needs a fix.

thiemowmde renamed this task from Mispositioned tooltip prevents adding a qualifier on Wikidata to [Bug] Mispositioned tooltip icon overlaps with "add qualifier" link and other elements.Oct 6 2016, 4:24 PM
gerritbot subscribed.Oct 6 2016, 4:28 PM

Change 314581 had a related patch set uploaded (by Thiemo Mättig (WMDE)):
Do not wrap question mark icon to the next line

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

gerritbot added a project: Patch-For-Review.Oct 6 2016, 4:28 PM
gerritbot added a comment.Oct 6 2016, 10:47 PM

Change 314581 merged by jenkins-bot:
Do not wrap question mark icon to the next line

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

Ash_Crow added a comment.Oct 8 2016, 10:46 AM

" The link behind the icon is clickable now."
Nope, it's not.

Lydia_Pintscher added a comment.Oct 13 2016, 2:03 PM

@Ash_Crow Can you please check again? It seems ok for me now. Maybe it wasn't deployed yet when you checked.

thiemowmde closed this task as Resolved.Oct 13 2016, 3:54 PM
thiemowmde claimed this task.
thiemowmde added a project: Wikidata-Sprint-2016-09-21.

What I wrote above was indeed wrong:

… the width is limited to the first 11 pixels. The link behind the icon is clickable now.

However, the patch above solved the issue by moving the icon up, to the right of the edit buttons. This patch is not yet live on wikidata.org, but can be tested on https://wikidata.beta.wmflabs.org/wiki/Q12?uselang=de.

Ash_Crow added a comment.Oct 13 2016, 4:01 PM
In T146691#2712861, @Lydia_Pintscher wrote:

@Ash_Crow Can you please check again? It seems ok for me now. Maybe it wasn't deployed yet when you checked.

It's OK on https://wikidata.beta.wmflabs.org/wiki/Q12?uselang=de, but not in wikidata.org... I thought the patch had been deployed in production because I have hidden the icon entirely and it was back.

thiemowmde moved this task from Proposed to Done on the Wikidata-Sprint-2016-09-21 board.Oct 13 2016, 4:11 PM

It came back because we had to change the CSS class name from .mw-… to .wb-…. This was done in https://gerrit.wikimedia.org/r/312001.

Charlie_WMDE moved this task from Incoming WD to Done on the WMDE-Design board.Nov 8 2016, 4:03 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL