JavaScript Library For Mouse Follow Tooltips – mousetip.js

Category: Javascript , Tooltip | July 27, 2019
Author:joeleisner
Views Total:735 views
Official Page:Go to website
Last Update:July 27, 2019
License:MIT

Preview:

JavaScript Library For Mouse Follow Tooltips – mousetip.js

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

You Might Be Interested In:


Leave a Reply