Minimal Dynamic Tooltip In Pure JavaScript – TooltipsJS

Category: Tooltip | July 13, 2019
Author:iamkentleom
Views Total:3,194 views
Official Page:Go to website
Last Update:July 13, 2019
License:MIT

Preview:

Minimal Dynamic Tooltip In Pure JavaScript – TooltipsJS

Description:

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

You Might Be Interested In:


Leave a Reply