This toggletip is created using the
<div> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with ARIA.
It is better to use the
<aside> elements to create toggletips because the browser provides more keyboard support and semantic information.
This toggletip is based on the design pattern first proposed by Steve Faulkner.
button role is used to expose the
<span> element as a button in the accessibility tree.
tabindex attribute is used to add the
<span> element to the tab order, based on its location within the DOM.
complementary role is used to expose the
<div> element as complementary information in the accessibility tree.
aria-expanded attribute indicates the current state of the toggletip.
aria-describedby attribute associates the tooltip content with the
hidden attribute hides the
<aside>> element until the toggletip is activated.
tooltip role exposes the
<span> element as a tooltip in the accessibility tree.
aria-live attribute turns the
<span> element into a live region that is announced automatically by screen readers.
keydown event listeners capture the expected mouse and keyboard events for opening and closing the toggletip.