Tiny Smart Tooltips In Pure JavaScript And CSS3

Category: Javascript , tooltip | September 15, 2018
Author: mirelvt
Views Total: 3,325
Official Page: Go to website
Last Update: September 15, 2018
License: MIT


Tiny Smart Tooltips In Pure JavaScript And CSS3


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:

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">

Load the main JavaScript file tooltip.min.js at the bottom of the webpage.

<script src="js/tooltip.min.js"></script>

Create an empty container for the tooltip.

<div class="tooltip-container no-display"></div>

Append a default tooltip to a specific element using the data-tooltip attribute:

<span data-tooltip="Tooltip">Hover me</span>


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