Change 821304 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: simple tooltip implementation with JS enhancement

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

Change 821304 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: simple tooltip implementation with JS enhancement

Reason:

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

Change 821304 restored by Bernard Wang:

[mediawiki/skins/Vector@master] POC: simple tooltip implementation with JS enhancement

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

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c4e027fe17/w

Good point, I've put up a patch demo with the very very rough POC here and a better example would look something like USWDS's tooltip component.

@Jdlrobson Mouseover sounds worth exploring (though I think we'd want it to also insert on focus too in that case). Agreed on generalizing the implementation, I could imagine using a class (i.e. .vector-tooltip) and a title attribute as the basic requirements for the JS enhancement, and additional data attributes to specify the placement of the tooltip if needed (i.e. data-tooltip-position: bottom)

In T312899#8158523, @Jdlrobson wrote:

Olga can you take a look at the patch demo and let us know if you think this is worth pursuing now or later (e.g. after accessibility consultation)?
T312899#8156266

No concerns in terms of showing it now (can always change copy and details if necessary after the consultation). The styling does feel a bit odd however (cc @alexhollender_WMF). Do we use this type of tooltips anywhere else usually?

I think another benefit of the proposed tooltip updates is that they have less of a delay (which I imagine is configurable), compared with the default/title attribute ones which have a ~2 second delay.

cc @Volker_E Design-System-Team

In T312899#8160804, @ovasileva wrote:

Do we use this type of tooltips anywhere else usually?

I think they are becoming more important as we increase the use of icon-buttons (e.g. all of these buttons)

Okay, looks like we can go ahead with this task then

Regarding the tooltip text size, the current 14px size used is too big for a tooltip since it's using the same size as the button.

Following the last typography tokens we could use 12/19.2 instead (12px size and 19.2px line height).

To clarify the patchdemo and the image in the description are very rough demos, we'd likely need design mocks before this can be worked on. It would also be helpful to get more details on the scope of the change. We use the title attribute in a lot of places, so it might make sense to initially limit the new tooltips to the header and sticky header for example.

@ovasileva I also wanted to point out that this task is likely to bring more attention to an existing issue with tooltips in modern Vector. In legacy Vector all the tooltips contained supplementary descriptions, which made sense considering everything was a link with a primary label. With icon buttons however, it might make more sense from a design/product perspective to display a shorter primary label in the tooltip rather than a description (i.e. hovering on the watchlist icon shows "Watchlist" vs "A list of pages you are monitoring for changes [⌃⌥l]"). More info here

By making the tooltips more usable and accessible, we are also bringing more attention to the tooltip text, which is currently inconsistent (i.e. echo icon buttons use primary labels, most of the user links are supplementary). We might want to consider updating the tooltip text in the future, which could be tricky as you can only have 1 tooltip, and I'm unsure how changing the original tooltip text could impact on the community, especially if certain people really like the accesskeys for example.

Change 821304 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: simple tooltip implementation with JS enhancement

Reason:

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

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c4e027fe17/w/