aria-haspopup
attribute. Tooltips are not considered 'popups' in this context.role=tooltip
and a unique id
. The unique ID is essential so that the button can reference the tooltip in its aria-describedby
attribute.:hover
and :focus
pseudo selectors. However, we would soon run into accessibility issues. When keyboard users tab away from the button, the tooltip overlay would dissapear. This behaviour prevents focus on any links inside of the tooltip overlay. We need to use JavaScript to prevent this behaviour.tooltip--js
selector. JavaScript can add this modifier class when the widget has fully initialised. Our tooltip isn't hidden until that time. This ensures that the tooltip content is readable and accessible without JavaScript.