918115 - T-Shirt Size tooltips on Create/Edit profile

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Iosif Psychas [:TheGallery]]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36

Steps to reproduce:

The T-shirt Size section in the Create/Edit Profile page, has informational tooltips next to Fitted and Straight-Cut. Currently you have to click on the information element to display the tooltip. I think displaying the tooltip on hover of the info element would be a better option.

Comment 1

[William Reynolds [:williamr]]

Thanks for suggesting this. I believe that the 'on click' display is specifically useful for mobile devices, where you cannot hover over the information element.

If it's possible to trigger the tooltip on either a click or hover, I think that would be ideal. Alex, is that easily doable?

Comment 2

[Alex Gibson [:agibson]]

(In reply to William Reynolds [:williamr] from comment #1)
> Thanks for suggesting this. I believe that the 'on click' display is
> specifically useful for mobile devices, where you cannot hover over the
> information element.
> 
> If it's possible to trigger the tooltip on either a click or hover, I think
> that would be ideal. Alex, is that easily doable?

Yes I think you should be able to set both 'click', 'mouseover/mouseout' event handlers to control the tooltip visibility. Only thing to test for is that some mobile browsers try to emulate hover events in different ways (some more successfully than others) - so you would need to assert some control over the order of events firing.

Comment 3

[Scott Lee [:pancakes9]]

Pull request sent.

Comment 4

[Justin Crawford [:hoosteeno] [:jcrawford]]

Thanks Scott! Someone will review and let you know if there are any changes.

Comment 5

[[github robot]]

Commit pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/1af388f955a550fee252c47d5adf2846327949dc
[fix bug 918115] Trigger t-shirt informational tooltips on hover.

Comment 6

[Matt Brandt [:mbrandt]]

Reopening:

Small enhancement/tweak - currently the only way to hide the tooltip is to tap/click on it. I would suggest that clicking anywhere on the page should hide the tooltip.

Tooltips look great btw on Desktop and mobile.

Comment 7

[Matt Brandt [:mbrandt]]

/me apologizes for the poorly worded reopened comment (comment 6)

Per conversation with sancus the clarification is:
- mouseover works as expected
- when a user clicks on the tooltip this is where it gets wonky and mouseover/mouseclick seem to get confused

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/9e23ea653efaa5da080a53b78f3b04e46a9c30bc
[Bug 918115] fix tooltip JS to be mobile friendly

https://github.com/mozilla/mozillians/commit/ec0990776f6087df18913988fd4fcd3a035865b5
Merge pull request #940 from Sancus/tooltipfix

[Bug 918115] fix tooltip JS to be mobile friendly

Comment 9

[Andrei Hajdukewycz [:sancus]]

This is fixed.

Comment 10

[Matt Brandt [:mbrandt]]

QA verified on prod -- spot on, thanks for the quick fix. The tooltip no longer get's stuck