Minimal Dynamic Tooltip In Pure JavaScript – TooltipsJS

The TooltipsJS library appends a minimal yet customizable fading & sliding tooltip to any DOM element. No CSS and 3rd dependencies.

How to use it:

Install & Download.

# NPM
$ npm install tooltips-js --save

Include the minified version of the TooltipsJS library from the dist folder.

<script src="dist/tooltips-js.min.js"></script>

Or from a CDN.

<script src="https://unpkg.com/tooltips-js"></script>

Initialize the Tooltip on the target element and define the tooltip content in the label option.

new Tooltip(document.getElementById('example'), {
    label: "This is a Tooltip example" // required
})

Set the position of the tooltip. Default: top.

new Tooltip(document.getElementById('example'), {
    label: "This is a Tooltip example", // required
    position: "bottom"
})

Customize the background color of the tooltip.

new Tooltip(document.getElementById('example'), {
    label: "This is a Tooltip example", // required
    color: "green"
})

Changelog:

07/13/2019

• default font for tooltips