Light/Dark HTML5 Tooltip Library – minitooltip

minitooltip is a pure JS solution to create customizable html5 tooltips using either data attributes or CSS classes.

Installation:

# Yarn
$ yarn add minitooltip
# NPM
$ npm install minitooltip --save

How to use it:

Add the minitooltip.css to the head section of the html page.

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

Append a default tooltip to the target DOM elements using HTML5 data-tip attribute:

<span data-tip="Tooltip Content">Hover Me</span>

Or using CSS class and title attribute:

<span class="tip" title="Tooltip Content">Hover Me</span>

Change the position of your tooltip.

<span data-tip="Tooltip Content" data-tip-position="down">Hover Me</span>
<span class="tip-down" title="Tooltip Content">Hover Me</span>

Set the tooltip theme to ‘light’.

<span data-tip="Tooltip Content" data-tip-theme="light">Hover Me</span>
<span class="tip-down tip-light" title="Tooltip Content">Hover Me</span>

Changelog:

09/26/2018

• v0.2.8