JavaScript Library For Mouse Follow Tooltips – mousetip.js

Preview:

Description:

mousetip.js is a lightweight, CSS-less JavaScript library used to create tooltips that always follows your cursor.

How to use it:

Installation:

# NPM
$ npm install purejs-mousetip --save

Just place the mousetip.js scrip at the end of the html file and you’re ready to go.

<script src="src/mousetip.js"></script>

Initialize the mousetip.js.

let mouseTip = new MouseTip();
mouseTip.start();

Add the CSS class ‘mousetip’ to target element and define the tooltip content using ‘mousetip-msg’ attribute as follows:

<div class="el" mousetip mousetip-msg="I'm a tooltip"></div>

Available options. All the following options can be passed via ‘mousetip-*’ attributes without any JS call.

• mousetip-pos=”bottom right”: bottom, center, top, right, center, left
• mousetip-css-zindex=”9999″: CSS z-index property
• mousetip-css-position=”absolute”: CSS position property
• mousetip-css-padding=”15px”: padding
• moutstip-css-borderradius=”4px”: border radius
• mousetip-css-background=”rgba(0,0,0,0.75)”: background color
• mousetip-css-color=”#fff”: text color
• mousetip-enable-html: enable HTML content

<div class="el" mousetip 
     mousetip-msg="I'm a tooltip"
     mousetip-pos="bottom right"
     mousetip-css-zindex="9999"
     mousetip-css-position="absolute"
     mousetip-css-padding="15px"
     moutstip-css-borderradius="4px"
     mousetip-css-background="rgba(0,0,0,0.75)"
     mousetip-css-color="#fff"
     ></div>

You can also config the tooltip in the JavaScript.

let mouseTip : new MouseTip({
    cssZIndex        : '9999',
    cssPosition      : 'absolute',
    cssPadding       : '15px',
    cssBorderRadius  : '4px',
    cssBackground    : 'rgba(0,0,0,0.75)',
    cssColor         : '#fff',
    html             : true,
    position         : 'bottom right',
    selector         : 'mousetip',
    stylesheet       : false
});

Changelog:

v2.1.5 (07/27/2019)

• Security Vulnerability Fixes

v2.1.4 (07/09/2019)

• Added npm scripts to alleviate the need for Gulp CLI to be installed globally
• Updated Babel core/preset-env and Gulp to their latest versions
• Replaced gulp-uglifyes with gulp-terser
• Added the ability to set a default message within MouseTip’s constructor function

v2.1.3 (02/08/2019)

• Bugfixes