This resource was developed to help instructors create an effective course outline based on the principles of Universal Design for Learning (UDL).
Wrap descriptive text with a button. The data-tip
attribute should be unique.
<button class="annotation" data-tip="foo">descriptive text</button>
The data-tip
attribute should then reference the tooltip contents at the bottom of the page (where the remaining tooltips are). For example:
<div id="foo">
<h2>Tooltip header</h2>
</div>
Visually hidden text and ARIA attributes are automatically added to annotations. Tooltips are positioned immediately after the annotation. Any interactive content within the tooltips should be keyboard focusable.
Created by Toronto Metropolitan University's UDL Working Group. Made with:
- Bootstrap 5 - the world’s most popular front-end open source toolkit.
- Tippy.js - Tooltip, popover, dropdown, and menu library.
- SkipTo - SkipTo is a replacement for your old classic "Skipnav" link.
"Foundations of a Course Outline" by Toronto Metropolitan University's UDL Working Group is licensed under CC BY-NC 4.0.