Page MenuHomePhabricator

Remove use of jquery.tipsy in MediaViewer
Open, LowestPublic

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/484

There is no documented option to add custom styling to a tipsy tooltip, so we just went with the default style, which is different from Pau's design and does not mix so well visually with the viewer.

Turns out there is a className option, so this could be fixed easily.

Design details
This is how tooltips look on Media Viewer (not many instances since browser based tooltips are used in many places for performance reasons):

This is the reference design for tooltips:

Related Objects

Event Timeline

MingleTerminator raised the priority of this task from to Normal.Dec 8 2014, 5:30 PM
MingleTerminator added a project: Multimedia.
Tgr renamed this task from Fix style of tipsy tooltips to Fix style of tipsy tooltips in MediaViewer.Dec 11 2014, 1:20 AM
Tgr added a project: UI-Standardization.
Tgr set Security to None.
Tgr added a subscriber: Tgr.

Is this still an ongoing issue? I wasn't able to find screenshots associated with this task. Any updates?

Restricted Application added a subscriber: Matanya. · View Herald TranscriptAug 27 2015, 10:14 PM

Frankly, I have no idea. @Pginer-WMF do you remember which design this task refers to?

Pginer-WMF added a comment.EditedAug 28 2015, 6:27 AM

Old tipsy tooltips were white with a light blue border. At that time, there were designs for tooltips to make them more aligned with the design guidelines (with a solid bevel at the bottom) and I saw them supported in places like Flow. After OOUI transition, I'm not sure those are still available.

In conclusion, if tipsy tooltips look like the ones below, this task can be definitely closed:

I also recall some discussions about the effect of tooltips and performance during the Media Viewer project. So it is possible that no tipsy at all was finally used (using default browser tooltips), making the styling of tipsy no longer relevant for the project. If that is true, we can also close the task.

Tgr added a comment.Aug 28 2015, 7:04 AM

MediaViewer uses the default tipsy style. Most, but not all, tooltips were eventually removed.

Pginer-WMF updated the task description. (Show Details)Aug 28 2015, 8:05 AM

Thanks @Tgr. I added the screenshot in the ticket description so that the ticket can be better understood at a glance.

Gotcha. We'll keep this open if you don't mind. cc @Volker_E

There's an approach currently used in Blueprint skin, on a skin level:

"ResourceModuleSkinStyles": {
	"blueprint": {
		"jquery.tipsy": [
			"skinStyles/tipsy.original.less",
			"skinStyles/tipsy.override.less"
		]
	}
}

I'm not very happy with the code of jquery.tipsy, it's pretty outdated, but seems to work for all different browsers and has been evaluated before. Alternative would be qTip2.

Just for my better understanding: On which level do we want customization be available?

Do we need customization?

Tgr added a comment.EditedAug 28 2015, 7:22 PM

There is T69500 if you want an overview of problems with tipsy. For MultimediaViewer the main headache was that tooltips defined to show on hover get stuck if the hover target area gets hidden while they are visible (very annoying when you have a tooltip on your close button). Also positioning near screen edges is not very intelligent, and worse in RTL languages (that might be some kind of conflict between tipsy and cssjanus; it was easier to work around than to track down.)

Volker_E added a comment.EditedAug 28 2015, 7:39 PM

@violetto As far as I've understood that task, there are two problems addressed (please correct me):

  1. Tooltips are currently not following Pau's design
  2. Tooltip design should be more easily customizable

Because with werdna/prtxsna's approach from Blueprint we can at least assure on a skin level CSS customization of the tooltips

Trying to understand the reasons why we need tooltips to be more easily customizable

@violetto @MingleTerminator Well, we're leaving most of the interface somehow customizable, right? Therefore my question on which (technical) level possible customization should be able to take place.

Tgr added a comment.Sep 2 2015, 11:39 PM

I'm not sure what the context is (are you working on UI standardization?) but adding styles to tipsy might not be worth the effort. For MediaViewer this is a fairly minor problem, and in general reviewing the OOUI tooltip widget, improving it if neededand providing a migration guide might be a better use of time. Frontend is supposed to use OOUI these days; tipsy is not terribly well written and problematic for all but the simplest use cases and we have a limited ability to change it (since we don't want to fork it); OOUI looks reasonably similar to the mockups and seems good at handling edge cases (e.g. making its contents scrollable when there is not enough place) and is well-supported and actively developed so it makes sense to standardize on that, IMO.

Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:29 PM
Volker_E lowered the priority of this task from Normal to Lowest.Sep 14 2015, 7:18 PM

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Krinkle renamed this task from Fix style of tipsy tooltips in MediaViewer to Remove use of jquery.tipsy in MediaViewer.Aug 30 2017, 5:33 PM

Change 516534 had a related patch set uploaded (by Simon04; owner: Simon04):
[mediawiki/extensions/MultimediaViewer@master] Remove most uses of jquery.tipsy in MediaViewer

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

Tgr removed a subscriber: Tgr.Jul 9 2019, 6:05 PM