Accessible Tooltip Examples
This page includes different tooltip examples. A tooltip is typically used to display more information about content on a screen and is generally displayed when placing the mouse cursor over an element such as an icon or a link.
Concepts included in this example include:
- The ARIA tooltip role has been used for the elements containing tooltip information.
- The ARIA aria-describedby property is applied to the control spawning the tooltip and references the contents of the tooltip. This ensures that the tooltip is announced upon receiving focus.
This sentence uses a link to display more information.
This is a sample link tooltip with more information about the link.
This example uses an icon image link after the sentence to toggle the tooltip information.
This is a sample tooltip triggered by an icon with more information about the link.