Page MenuHomePhabricator

ArticleFeedbackv5 "What's this?" tooltip is mostly built with images and should be rewritten with CSS
Open, Needs TriagePublic

Description

The tooltip is built with 4 images, one for each side, which can instead be written using the background, border, border-radius, box-shadow, etc etc.

This means that...

  • these two:<div class="tooltip-top"></div> and <div class="tooltip-bototm></div> should be removed
  • remove CSS styling for .articleFeedbackv5-tooltip .tooltip-top, .articleFeedbackv5-tooltip .tooltip-repeat, and .articleFeedbackv5-tooltip .tooltip-bottom
  • apply the CSS style to the parent element which is the <div> element with the .articleFeedbackv5-tooltip ( <div class="articleFeedbackv5-tooltip"> )

Event Timeline

SamanthaNguyen moved this task from Backlog to Feedback on the ArticleFeedbackv5 board.

Change 330107 had a related patch set uploaded (by SamanthaNguyen):
[WIP] Rewrite AFTv5 tooltip in CSS

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

Tooltips almost never work well for mobile and just makes working on T34293 harder, so I'm thinking of switching this to just a paragraph that's appended at the bottom of the AFTv5 card that says "did you find this useful? yes/no". Thoughts @ashley?

If we still want to make hidden by default and still have a toggle feature, we can use the .mw-collapsible class with the .mw-collapsed class chained, which would look like: class="mw-collapsible mw-collapsed". See https://www.mediawiki.org/wiki/Manual:Collapsible_elements#CSS

ashley added a comment.Jan 8 2017, 9:40 PM

Tooltips almost never work well for mobile and just makes working on T34293 harder, so I'm thinking of switching this to just a paragraph that's appended at the bottom of the AFTv5 card that says "did you find this useful? yes/no". Thoughts @ashley?

Sure.

If we still want to make hidden by default and still have a toggle feature, we can use the .mw-collapsible class with the .mw-collapsed class chained, which would look like: class="mw-collapsible mw-collapsed". See https://www.mediawiki.org/wiki/Manual:Collapsible_elements#CSS

Yes please.

Well, I found an OOUI widget called PopupButtonWidget, which emulates a tooltip upon a click. It saves us from having to build our own tooltip which also means less code duplication. Do we still want a tooltip? Here's the documentation of the widget, btw:

Change 330107 abandoned by SamanthaNguyen:
[WIP] Cleanup AFTv5 tooltip & CSS, and convert it to mw-collapsible element

Reason:
I'll split this into two patchsets, 1 for cleaning up and other for converting to OOUI tooltip.

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

SamanthaNguyen removed SamanthaNguyen as the assignee of this task.Jun 30 2018, 8:49 PM
SamanthaNguyen removed a project: Patch-For-Review.
SamanthaNguyen removed a subscriber: SamanthaNguyen.