Tooltips and their problems

Tooltips are a visual pattern, not a functional pattern.

Hover cards, form tooltips, icon tooltips, toggletips, etc. are all used in different ways. How they work is dependent on what they are tied to, rather than some inbuilt semantic meaning. For example, they are sometimes used as a description, other times a label/title.

Tooltips are hard to make work on mobile as hover/focus doesn't really apply there.

Some general rules:

• Tooltips should always be applied to an interactive element
• Should not contain interactive elements, if they need to they should be a non-modal dialog and opened on click, not hover
• Should not contain essential information

Usually a more accessible approach is a popover/toggletip/etc, something that is tied to a button and is shown on click. This is closer to a modal/dialog, which is generally more accessible.

https://www.youtube.com/watch?v=lb0_v7D4kbs

[[20210511105337-title-attribute-a11y]]

[[a11y]] [[components]]