=== Background
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. [[ https://inclusive-components.design/tooltips-toggletips/ | Tooltips from the Inclusive Components guidance ]].
=== Developer notes
We can use JS to progressively enhance elements with the `title` attribute to create tooltip elements.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, However,links in the page toolbar). stylingWe also want the tooltips will likely be challengingability to position the tooltip via data attributes, especially considering the variety of elements make use of the `title` attribute (i.e. buttons in the header, links in the user menu).`data-tooltip-position="top"`.
Tooltips can also be implemented as [[ https://inclusive-components.design/tooltips-toggletips/#inclusivetooltips | either supplementary descriptive text, Depending on how complex we want our tooltips to be,or as primary labels ]]. we might have to implement positioning logic that automatically places the tooltip either below,The implementation we choose impacts how the tooltips are read out to screenreader users. to the right or to the left of the element depending on tooltip spacingCurrently most of the `title` attributes in Vector fall under supplementary descriptive text, similarso we likely only need to page previews.
support that to begin with.
These would appear like so:
{F35456892}
{F35456894}