Tiny Smart Tooltips In Pure JavaScript And CSS3

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

Preview:

Tiny Smart Tooltips In Pure JavaScript And CSS3

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.

You Might Be Interested In:


Leave a Reply