An Accessible Tooltip Plugin
Accessibility is one aspect often lacking in web development. Tooltip popups should happen when a user hovers or focuses over a given target element.
Browser Support
IE8+, Chrome, Firefox, Opera, Safari, iOS Safari, Android
Markup
When creating a tooltip, make sure the actual tooltip (the element containing role="tooltip"
) has a unique id
, and that source element points to that id
in its aria-describedby
.
<a href="#" class="tooltip" aria-haspopup="true" aria-describedby="tip1"> <span class="anchor-text" role="presentation">I contain a tooltip </span> </a> <div role="tooltip" id="tip1" aria-hidden="true"> Tooltip text goes <strong>here</strong> </div>
On Hover
On Focus
Initialize
$(".tooltip").tooltip(); // Initialize n tooltips