Page MenuHomePhabricator

Add tooltip to inline toggle
Closed, ResolvedPublicFeature

Assigned To
Authored By
TheresNoTime
Sep 15 2023, 9:54 AM
Referenced Files
F38514052: 2023-10-17_13-14-39.webm
Oct 17 2023, 8:46 PM
F38513061: T346429_Inline.webm
Oct 17 2023, 8:46 PM
F38510547: 2023-10-17_11-05-18.png
Oct 17 2023, 6:27 PM
F38510516: 2023-10-17_10-55-54.png
Oct 17 2023, 6:27 PM
F38510522: 2023-10-17_11-13-48.png
Oct 17 2023, 6:27 PM
F38510519: 2023-10-17_11-12-38.png
Oct 17 2023, 6:27 PM
F38510513: 2023-10-17_10-54-55.png
Oct 17 2023, 6:27 PM
F38510511: 2023-10-17_10-50-31.png
Oct 17 2023, 6:27 PM
Tokens
"Like" token, awarded by matmarex.

Description

As a user who does not know what the "inline" toggle does when viewing a diff, I would like a short but descriptive explanation of what the toggle does to appear when I hover my mouse over the toggle, so that I can understand what the toggle does before clicking it.

QA Results - Beta

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptSep 15 2023, 9:54 AM
HMonroy renamed this task from Add hover text to inline toggle to Add tooltip to inline toggle.Oct 10 2023, 8:14 PM

Would a help message as the one below work?

Screenshot from 2023-10-12 16-26-08.png (295ร—1 px, 30 KB)

Also, what should the text be?

I will set the help text to state "Switches between inline format and two-column format"

Change 965612 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/core@master] diff: add help message to inline switch

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

Change 965612 merged by jenkins-bot:

[mediawiki/core@master] diff: add help message to inline switch

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

@HMonroy @TheresNoTime Did we want a tooltip or a help icon (i)? The task description and the user's comment suggests we want a tooltip.

@HMonroy @TheresNoTime Did we want a tooltip or a help icon (i)? The task description and the user's comment suggests we want a tooltip.

Yes, I think we definitely want a tooltip (should be as simple as using title instead of help at https://gerrit.wikimedia.org/r/c/mediawiki/core/+/965612/3/includes/diff/TextSlotDiffRenderer.php).

Folks have already complained about how noisy the new UI is.

Sorry this went unnoticed!

Change 966575 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/core@master] TextSlotDiffRenderer: show tooltip instead of help icon on inline switch

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

@dom_walden Thank you for flagging it and @MusikAnimal thank you for patching it.

Change 966575 merged by jenkins-bot:

[mediawiki/core@master] TextSlotDiffRenderer: show tooltip instead of help icon on inline switch

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

@HMonroy Please review my findings below, thanks!

Status: โŒ FAIL
Environment: Beta: 1.42.0-alpha (a678bcf)
OS: macOS Sonoma 14.0, Windows 11
Browser: Chrome 117, Firefox 118, Safari 17.0Edge 117
Skins. Vector 2022, 2010, Minerva, Monobook, Timeless
Device: MBA M2
Emulated Device:: BrowserStack for Windows 11- Edge
Test Links:
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=World_of_Warcraft&diff=603897&oldid=603896*
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=World_of_Warcraft&diff=603897&oldid=603896*&uselang=en-rtl

โŒAC1: https://phabricator.wikimedia.org/T346429#9258792

Over the browser- When you narrow your screen tab, it crosses over

2023-10-17_10-41-51.png (630ร—3 px, 251 KB)

Zoom adjustment- When you zoom the tooltip crosses over, more noticeable with rtl as seen in the screenshot. Also when you zoom, should the tooltip font size still stay the same?

DefaultEN-RTL
2023-10-17_10-50-31.png (968ร—3 px, 298 KB)
2023-10-17_10-54-55.png (864ร—1 px, 187 KB)

Difference in Browsers- Chrome and Safari tooltip use 2 lines with grey background. Firefox uses 1 line w/grey background. Edge uses 1 line w/white background

ChromeSafariFirefoxEdge
2023-10-17_11-12-38.png (565ร—2 px, 171 KB)
2023-10-17_11-13-48.png (504ร—1 px, 134 KB)
2023-10-17_10-55-54.png (558ร—2 px, 171 KB)
2023-10-17_11-05-18.png (675ร—1 px, 441 KB)

Please review my findings below, thanks!
โ€ฆ

Similar to the "possible issue" raised at T346193#9185302, here we're using the native HTML title attribute. We do not have control over the way it is styled or positioned. Variance across different browsers is expected.

One thing you could do moving forward is to compare with the style guide demo page. If the demo page appears the same, there's no concern (or at least the concern is not with our code).

For example, here we're using OOUI, so I'll refer to https://doc.wikimedia.org/oojs-ui/master/demos (refer to https://doc.wikimedia.org/codex/main/ for Codex). Searching the widgets for "title" (the attribute we're using), I found ButtonInputWidget (with access key & title). Hovering over that button, you should see the same behaviour as you do with the tooltip (aka title) introduced with the above patch.

@GMikesell-WMF The OOUI widget is responsible for rendering the title attribute that we added so that we can have a tooltip. As long as the tooltip doesn't interfere with the click, it should be okay. Thanks for reporting it!

@HMonroy @MusikAnimal Got it, thanks for the info! I'll keep that in mind for next time. Based on the findings from above and below, I will move this to Done. Thanks for all your work!

Status: โœ… PASS
Environment: Beta: 1.42.0-alpha (a678bcf)
OS: macOS Sonoma 14.0, Windows 11
Browser: Chrome 117, Firefox 118, Safari 17.0Edge 117
Skins. Vector 2022, 2010, Minerva, Monobook, Timeless
Device: MBA M2
Emulated Device:: BrowserStack for Windows 11- Edge
Test Links:
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=World_of_Warcraft&diff=603897&oldid=603896*
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=World_of_Warcraft&diff=603897&oldid=603896*&uselang=en-rtl

โœ… AC1: https://phabricator.wikimedia.org/T346429#9258792

Hover on "Inline" and toggle

VoiceOver