Tiny Smart Tooltips In Pure JavaScript And CSS3

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:

07/10/2024

• Refactor
• Add dark mode

v2.0 (12/12/2020)

• Has keyboard navigation and voicOver accessibility

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.