Vector currently uses the title attribute to provide tooltips containing additional information on hover. However, title attributes are not accessible and are poorly/inconsistently implemented across browsers and screen readers, leading to bugs like T312891
This task is for replacing usage of the title attribute with a proper tooltip implementation that appears on hover/focus, i.e. Tooltips from the Inclusive Components guidance.
We can use JS to progressively enhance elements with the title attribute and the .vector-tooltips class to create custom tooltips. The JS and styles would have to account for a variety of elements that use the title attribute (i.e. buttons in the header, links in the user menu, links in the page toolbar). We also want the ability to position the tooltip via data attributes, i.e. data-tooltip-position="top".
Tooltips can also be implemented as either supplementary descriptive text, or as primary labels. The implementation we choose impacts how the tooltips are read out to screenreader users. Most of the title attributes in Vector fall under supplementary descriptive text, but the most obvious need for tooltips is with icon buttons, which are primary labels.
These would appear like so: