Author: | mirelvt |
---|---|
Views Total: | 1,652 views |
Official Page: | Go to website |
Last Update: | December 12, 2020 |
License: | MIT |
Preview:

Description:
A super tiny (~2kb) JavaScript library for creating CSS3 animated tooltips that auto re-position themselves depending on the current position relative to the screen edge.
How to use it:
1. Load the tooltip.min.css
in the header that will provide the primary styles and animations for the tooltips.
<link rel="stylesheet" href="css/tooltip.min.css">
2. Load the main JavaScript file tooltip.min.js
at the bottom of the webpage.
<script src="js/tooltip.min.js"></script>
3. Create an empty container for the tooltip.
<div class="tooltip-container" role="alertdialog" id="tooltipText" aria-hidden="true" aria-live="polite"></div>
4. Append a default tooltip to a specific element using the data-tooltip
attribute:
<span data-tooltip="Tooltip">Hover me</span>
5. Make the tooltip accessible.
<span data-tooltip="Tooltip" aria-describedby="tooltipText" tabindex="0">Hover me</span>
Changelog:
v2.0 (12/12/2020)
- Has keyboard navigation and voicOver accessibility
v1.2.4 (04/25/2020)
- Take window scroll position into account.
v1.2.3 (09/15/2018)
- Use ES6 const and let, fix eslint warnings. Remove css prefixes.