├── .gitignore ├── .babelrc ├── .npmignore ├── gulp ├── rename.js ├── config.js ├── header.js └── tasks.js ├── .eslintrc.js ├── gulpfile.js ├── license.txt ├── package.json ├── changelog.md ├── src └── mousetip.js └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .DS_Store 3 | .eslintrc.js 4 | .git/ 5 | .gitignore 6 | gulp/ 7 | gulpfile.js 8 | src/ 9 | -------------------------------------------------------------------------------- /gulp/rename.js: -------------------------------------------------------------------------------- 1 | const rename = require('gulp-rename'); 2 | 3 | module.exports = (suffix) => rename({ suffix: suffix || '.min' }); 4 | -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dest: 'dist', 3 | modules: { 4 | append: { 5 | common: '\nmodule.exports = MouseTip;', 6 | es2015: '\nexport default MouseTip;' 7 | }, 8 | dest: 'dist/modules' 9 | }, 10 | src: 'src/mousetip.js', 11 | watch: 'src/**/*.js' 12 | }; 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "rules": { 9 | "indent": [ 10 | "error", 11 | 4 12 | ], 13 | "linebreak-style": [ 14 | "error", 15 | "unix" 16 | ], 17 | "quotes": [ 18 | "error", 19 | "single" 20 | ], 21 | "semi": [ 22 | "error", 23 | "always" 24 | ] 25 | } 26 | }; -------------------------------------------------------------------------------- /gulp/header.js: -------------------------------------------------------------------------------- 1 | const header = require('gulp-header'); 2 | const pkg = require('../package.json'); 3 | 4 | module.exports = min => { 5 | const bannerExp = 6 | `/** 7 | * <%= pkg.name %> - <%= pkg.description %> 8 | * @version <%= pkg.version %> 9 | * @author <%= pkg.author %> 10 | * @link <%= pkg.homepage %> 11 | * @license <%= pkg.license %> 12 | */ 13 | 14 | `, 15 | bannerMin = 16 | `/* <%= pkg.name %> <%= pkg.version %> | <%= pkg.license %> | <%= pkg.homepage %> */ 17 | 18 | `; 19 | return header(min ? bannerMin : bannerExp, { pkg }); 20 | }; 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'), 2 | tasks = require('./gulp/tasks'); 3 | 4 | gulp.task('build-es2015', tasks.es2015); 5 | gulp.task('build-legacy', tasks.legacy); 6 | gulp.task('build', tasks.all()); 7 | gulp.task('build-commonjs-module', tasks.modules.commonJs); 8 | gulp.task('build-es2015-module', tasks.modules.es2015); 9 | gulp.task('build-modules', tasks.modules.all()); 10 | gulp.task('default', tasks.watch()); 11 | gulp.task('watch', tasks.watch()); -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Joel Eisner 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "purejs-mousetip", 3 | "version": "2.1.5", 4 | "description": "A pure javascript solution for creating tooltips that follow your mouse", 5 | "main": "gulpfile.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/joeleisner/purejs-mousetip" 9 | }, 10 | "author": "Joel Eisner ", 11 | "scripts": { 12 | "build-es2015": "npx gulp build-es2015", 13 | "build-legacy": "npx gulp build-legacy", 14 | "build": "npx gulp build", 15 | "build-commonjs-module": "npx gulp build-commonjs-module", 16 | "build-es2015-module": "npx gulp build-es2015-module", 17 | "build-modules": "npx gulp build-modules", 18 | "watch": "npx gulp watch" 19 | }, 20 | "homepage": "http://joeleisner.com/purejs-mousetip", 21 | "keywords": [ 22 | "javascript", 23 | "mousetip", 24 | "mousetips", 25 | "tooltip", 26 | "tooltips", 27 | "vanilla" 28 | ], 29 | "license": "MIT", 30 | "devDependencies": { 31 | "@babel/core": "^7.5.5", 32 | "@babel/preset-env": "^7.5.5", 33 | "gulp": "^4.0.2", 34 | "gulp-babel": "^8.0.0", 35 | "gulp-header": "^2.0.9", 36 | "gulp-inject-string": "^1.1.2", 37 | "gulp-rename": "^1.4.0", 38 | "gulp-terser": "^1.2.0", 39 | "gulp-uglify": "^3.0.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /gulp/tasks.js: -------------------------------------------------------------------------------- 1 | const babel = require('gulp-babel'), 2 | config = require('./config'), 3 | gulp = require('gulp'), 4 | header = require('./header'), 5 | inject = require('gulp-inject-string'), 6 | rename = require('./rename'), 7 | terser = require('gulp-terser'), 8 | uglify = require('gulp-uglify'); 9 | 10 | function buildScript(type) { 11 | const { dest, src } = config; 12 | return gulp.src(src) 13 | .pipe(type ? rename('.' + type) : babel()) 14 | .pipe(header()) 15 | .pipe(gulp.dest(dest)) 16 | .pipe(type ? terser() : uglify()) 17 | .pipe(header(true)) 18 | .pipe(rename()) 19 | .pipe(gulp.dest(dest)); 20 | } 21 | 22 | function buildModule(type) { 23 | const { modules, src } = config, 24 | { append, dest } = modules; 25 | return gulp.src(src) 26 | .pipe(rename('.' + type)) 27 | .pipe(inject.append(append[type])) 28 | .pipe(gulp.dest(dest)); 29 | } 30 | 31 | module.exports = { 32 | all() { 33 | const { es2015, legacy, modules } = this; 34 | return gulp.series(gulp.parallel(es2015, legacy, modules.all())); 35 | }, 36 | es2015() { return buildScript('es2015'); }, 37 | legacy() { return buildScript(); }, 38 | modules: { 39 | all() { 40 | const { commonJs, es2015 } = this; 41 | return gulp.series(gulp.parallel(commonJs, es2015)); 42 | }, 43 | commonJs() { return buildModule('common'); }, 44 | es2015() { return buildModule('es2015'); } 45 | }, 46 | watch() { 47 | const { all } = this; 48 | return () => gulp.watch(config.watch, all.bind(this)()); 49 | } 50 | }; -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [Version 2.1.5 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.5) 4 | This patch includes updates dependencies due to security vulnerabilities: 5 | * Updated `@babel/core` and `@babel/preset-env` to their latest versions 6 | * Updated `gulp-header` to its latest version 7 | 8 | ## [Version 2.1.4 - Minor upgrades](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.4) 9 | This patch update includes updated dependencies and a new setting for MouseTip: 10 | * Added npm scripts to alleviate the need for Gulp CLI to be installed globally 11 | * Updated Babel core/preset-env and Gulp to their latest versions 12 | * Replaced gulp-uglifyes with gulp-terser 13 | * Added the ability to set a default message within MouseTip's constructor function 14 | 15 | ## [Version 2.1.3 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.3) 16 | This patch update includes updated dependencies due to isses with Lodash < 4.17.11. Here's the details: 17 | * Updated gulp-babel, gulp-header, gulp-inject-string, gulp-rename, gulp-uglify, and gulp-uglifyes to their latest versions 18 | * Swapped babel-core and babel-preset-env with @babel/core @babel/preset-env, which required updating the Babel RC file 19 | 20 | ## [Version 2.1.2 - Gulp Watch Fix](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.2) 21 | Another minor update in the same day? Yeah, I made a mistake; Here's what I fixed: 22 | * The build-system's `gulp watch` task is now working 23 | 24 | ## [Version 2.1.1 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.1) 25 | This minor update includes some fixes related to security vulnerabilities! Here's the details: 26 | * Gulp was updated to 4.0 to fix security vulnerabilities 27 | * The build-system was restructured to work with the new version of Gulp 28 | 29 | ## [Version 2.1.0 - CommonJS & ES2015 Modules](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.0) 30 | This version now includes CommonJS & ES2015 modules to more easily include Pure JS MouseTip into your projects! Here's the details: 31 | * Modules can be found in the `dist/modules` directory 32 | * The CommonJS module exports the class as: `module.exports = MouseTip;` 33 | * The ES2015 module exports the class as: `export default MouseTip;` 34 | 35 | ## [Version 2.0.1 - Bug Fixes & Optimizations](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.0.1) 36 | This version is a minor update to fix/optimize a few things: 37 | * Fixed a bug that would break mousetip positions set in element attributes when hovering over a child element of the target. 38 | * Changed the constructor's mousetip state to store a DOM reference to the mousetip itself, removing two `document.getElementById(this.selector)` calls. 39 | 40 | ## [Version 2.0.0 - ES2015 Rebuild & New Features](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.0.0) 41 | Version 2.0.0 was rebuilt from the ground up to add new features. Here's some of the changes: 42 | * The main MouseTip constructor function is now an ES2015 class, making for easier code management and shifting towards more modern JS engines. While the default scripts (`mousetip.js` and `mousetip.min.js`) are still compatible with older browsers (transpiled using Babel.js), the ES2015 versions (`mousetip.es2015.js` and `mousetip.es2015.min.js`) will become the default in a later release. 43 | * A bug was fixed where certain user-set CSS settings were not mapped properly to the constructor's settings. 44 | * The `run()` method was renamed to `start()` to make more sense with the new method addition below 45 | * A new `stop()` method was added to stop all mousetip functionality at any time 46 | * A new `stylesheet` constructor setting was added (false by default). This allows you to specify not to include inline styles on the mousetip element, and instead expect the styling to be included in a stylesheet on the page. Element attributes will still work in this mode. 47 | * The build system has been reworked, include upgraded/new dependencies and a change of structure. The most noticeable change is that the default scripts are now built with Babel.js; While this leads to larger file sizes, it allows for future-proofing our script and ensures more browser support with less testing. 48 | 49 | ## [Version 1.2.3 - NPM Publish Issues](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.2.3) 50 | This release is exactly the same as 1.2.2, except with the version number incremented up by one. Unfortunately, I had mistakenly published a version 1.2.2 a while back and cannot overwrite this unpublished version. Instead of letting release versions get out of sync between the repo and the NPM package, I'm pushing this change to set things straight again. 51 | 52 | ## [Version 1.2.2 - Build System Improvements](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.2.2) 53 | This update includes some build-system improvements: 54 | * All build-system javascript now utilizes ES2015 (ES6) syntax 55 | * Removed the `clean` task from Gulp 56 | 57 | ## [Version 1.2.1 - Bug Fixes & Optimizations](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.2.1) 58 | Minor updates have been made. Here's what's changed: 59 | * MouseTip can now be installed by NPM! (Check out the Installation section) 60 | * By default, MouseTip now runs with HTML capabilities turned on 61 | * Elements are not selected until `this.run()` is called 62 | * Linting warnings squashed 63 | * Build system optimized 64 | 65 | ## [Version 1.2.0 - HTML Messages](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.2.0) 66 | Added HTML capabilities within MouseTip messages! 67 | * By default, MouseTip runs with HTML capabilities turned off 68 | * HTML capabilities can be enabled globally via `html: true` in the global settings object 69 | * HTML capabilities can be enabled/disabled individually via the `mousetip-enable-html` or `mousetip-disable-html` attribute 70 | 71 | ## [Version 1.1.0 - New Selector Setting](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.1.0) 72 | Added new MouseTip constructor setting **selector** 73 | * Now you can namespace every MouseTip instance 74 | * When a custom selector is passed into the settings, MouseTip will look for attributes with that new namespace (i.e. "awesomeName" instead of "mousetip", "awesomeName-css-zindex" instead of "mousetip-css-zindex") 75 | * Check out the *How to Use* section in readme.md to see this new setting in action 76 | 77 | ## [Version 1.0.1 - First Release (Bug Fixes)](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.0.1) 78 | Simple bug fixes: 79 | * Updated the bindMouseMove function to utilize pageX/pageY instead of clientX/clientY 80 | * Fixed missing-semicolon JSHint warnings in the mousetip script 81 | 82 | ## [Version 1.0.0 - First Release](https://github.com/joeleisner/purejs-mousetip/releases/tag/v1.0.0) 83 | Version 1.0.0 is here, and it includes an entirely new way to use the PureJS MouseTip script! 84 | * The script is now wrapped in a MouseTip constructor function instead of a self-executing function 85 | * The script can now take global style/position overrides when an instance of the constructor is created 86 | * The script will not find the MouseTip elements or bind mouse events until a constructor instance's .run() function is called 87 | 88 | ## [Version 0.0.1 - Early Alpha](https://github.com/joeleisner/purejs-mousetip/releases/tag/v0.0.1) 89 | This javascript tool is still in its early stages, so give me some feedback, contribute, and help make it better! -------------------------------------------------------------------------------- /src/mousetip.js: -------------------------------------------------------------------------------- 1 | class MouseTip { 2 | 3 | // Construct the class 4 | constructor({ 5 | cssZIndex = '9999', 6 | cssPosition = 'absolute', 7 | cssPadding = '15px', 8 | cssBorderRadius = '4px', 9 | cssBackground = 'rgba(0,0,0,0.75)', 10 | cssColor = '#fff', 11 | html = true, 12 | msg = '', 13 | position = 'bottom right', 14 | selector = 'mousetip', 15 | stylesheet = false 16 | } = {}) { 17 | // Assign the settings to the class,... 18 | this.html = html; 19 | this.msg = msg; 20 | this.position = position; 21 | this.selector = selector; 22 | this.stylesheet = stylesheet; 23 | // ... and if a stylesheet has been enabled, do nothing more 24 | if (this.stylesheet) return; 25 | // Otherwise, assign the CSS settings to the class as well 26 | this.cssZIndex = cssZIndex; 27 | this.cssPosition = cssPosition; 28 | this.cssPadding = cssPadding; 29 | this.cssBorderRadius = cssBorderRadius; 30 | this.cssBackground = cssBackground; 31 | this.cssColor = cssColor; 32 | } 33 | 34 | // Create the mousetip 35 | createMouseTip(event) { 36 | // Store the target element 37 | this.element = event.target; 38 | // Create the mousetip 39 | const mouseTip = document.createElement('span'); 40 | // Store the styling either from the target element's attributes or the constructor settings 41 | const zIndex = this.element.getAttribute(this.selector + '-css-zindex') || this.cssZIndex, 42 | position = this.element.getAttribute(this.selector + '-css-position') || this.cssPosition, 43 | padding = this.element.getAttribute(this.selector + '-css-padding') || this.cssPadding, 44 | borderRadius = this.element.getAttribute(this.selector + '-css-borderradius') || this.cssBorderRadius, 45 | background = this.element.getAttribute(this.selector + '-css-background') || this.cssBackground, 46 | color = this.element.getAttribute(this.selector + '-css-color') || this.cssColor; 47 | // Assign the ID and styling to the mousetip 48 | mouseTip.id = this.selector; 49 | mouseTip.style.zIndex = zIndex; 50 | mouseTip.style.position = position; 51 | mouseTip.style.padding = padding; 52 | mouseTip.style.borderRadius = borderRadius; 53 | mouseTip.style.background = background; 54 | mouseTip.style.color = color; 55 | // Grab the message and HTML attributes from the event target 56 | const message = this.element.getAttribute(this.selector + '-msg') || this.msg, 57 | html = this.html ? 58 | this.element.hasAttribute(this.selector + '-disable-html') : 59 | this.element.hasAttribute(this.selector + '-enable-html'); 60 | // If HTML is disabled globally and on the target element (or the inverse)... 61 | if ((!this.html && !html) || (this.html && html)) { 62 | // ... append the message to the mousetip as a text-node... 63 | mouseTip.appendChild(document.createTextNode(message)); 64 | } else { 65 | // ... otherwise, append the message to the mousetip as HTML 66 | mouseTip.innerHTML = message; 67 | } 68 | // Append the mousetip to the bottom of the page... 69 | document.body.appendChild(mouseTip); 70 | // ... and store the mousetip 71 | this.mouseTip = document.getElementById(this.selector); 72 | } 73 | 74 | // Delete the mousetip 75 | deleteMouseTip() { 76 | // If the stored mousetip does not exist, return 77 | if (!this.mouseTip) return; 78 | // Delete the mousetip... 79 | this.mouseTip.parentNode.removeChild(this.mouseTip); 80 | // ... and delete the stored mousetip 81 | delete this.mouseTip; 82 | // If the stored target element does not exist, return 83 | if (!this.element) return; 84 | // Delete the stored target element 85 | delete this.element; 86 | } 87 | 88 | // Update the mousetip 89 | updateMouseTip(event) { 90 | // Grab the X/Y of the mouse 91 | const mouseX = event.pageX, 92 | mouseY = event.pageY; 93 | // Set the default adjustment to 15 94 | const defaultAdjust = 15; 95 | // Get the mousetip position from the target element or the constructor 96 | let position = (this.element.getAttribute(this.selector + '-pos') || this.position).split(' '), 97 | verticalAdjust, horizontalAdjust; 98 | // If the position does not contain two items, set it to the default 99 | if (position.length !== 2) position = [ 'bottom', 'right' ]; 100 | // Set the vertical adjustment from the first item of position 101 | switch(position[0]) { 102 | case 'top': 103 | verticalAdjust = -defaultAdjust - this.mouseTip.offsetHeight; 104 | break; 105 | case 'center': 106 | verticalAdjust = 0 - (this.mouseTip.offsetHeight / 2); 107 | break; 108 | default: 109 | verticalAdjust = defaultAdjust; 110 | } 111 | // Set the horizontal adjustment from the second item of position 112 | switch(position[1]) { 113 | case 'left': 114 | horizontalAdjust = -defaultAdjust - this.mouseTip.offsetWidth; 115 | break; 116 | case 'center': 117 | horizontalAdjust = 0 - (this.mouseTip.offsetWidth / 2); 118 | break; 119 | default: 120 | horizontalAdjust = defaultAdjust; 121 | } 122 | // Update the mousetip's position 123 | this.mouseTip.style.top = `${ mouseY + verticalAdjust }px`; 124 | this.mouseTip.style.left = `${ mouseX + horizontalAdjust }px`; 125 | } 126 | 127 | // Handle mouse events 128 | handleEvent(event) { 129 | switch (event.type) { 130 | case 'mouseenter': 131 | // When the mouse enters an element, create the mousetip 132 | this.createMouseTip(event); 133 | break; 134 | case 'mouseleave': 135 | // When the mouse leaves an element, delete the mousetip 136 | this.deleteMouseTip(); 137 | break; 138 | case 'mousemove': 139 | // When the mouse moves inside an element, update the mousetip 140 | this.updateMouseTip(event); 141 | } 142 | } 143 | 144 | // Start handling mouse events 145 | start() { 146 | // Grab all elements by selector 147 | const elements = document.querySelectorAll(`[${ this.selector }]`); 148 | // If no elements were found, return 149 | if (!elements) return; 150 | // Store the elements for reference,... 151 | this.elements = elements; 152 | // ... and for each,... 153 | for (let i = 0; i < elements.length; i++) { 154 | const element = elements[i]; 155 | // ... bind the mouse enter, leave, and move events 156 | element.addEventListener('mouseenter', this, false); 157 | element.addEventListener('mouseleave', this, false); 158 | element.addEventListener('mousemove', this, false); 159 | } 160 | } 161 | 162 | // Stop handling mouse events 163 | stop() { 164 | // If no element references are stored, return 165 | if (!this.elements || !this.elements.length) return; 166 | // For each element... 167 | for (let i = 0; i < this.elements.length; i++) { 168 | const element = this.elements[i]; 169 | // ... unbind the mouse enter, leave, and move events 170 | element.removeEventListener('mouseenter', this, false); 171 | element.removeEventListener('mouseleave', this, false); 172 | element.removeEventListener('mousemove', this, false); 173 | } 174 | // Delete the stored element references... 175 | delete this.elements; 176 | // ... and the mousetip 177 | this.deleteMouseTip(); 178 | } 179 | 180 | } 181 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Pure JS MouseTip 2 | A pure javascript solution for creating tooltips that follow your mouse. This project was heavily inspired from the [MouseTip jQuery extension by Nathan Rutzky](https://github.com/nathco/jQuery.mousetip). 3 | 4 | ![A demonstration of Pure JS MouseTip in action](http://joeleisner.com/github/screenshots/purejs-mousetip/purejs-moustip-demo.gif) 5 | 6 | ## Latest Release 7 | 8 | ### [Version 2.1.5 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.5) 9 | This patch includes updates dependencies due to security vulnerabilities: 10 | * Updated `@babel/core` and `@babel/preset-env` to their latest versions 11 | * Updated `gulp-header` to its latest version 12 | 13 | ### [Version 2.1.4 - Minor upgrades](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.4) 14 | This patch update includes updated dependencies and a new setting for MouseTip: 15 | * Added npm scripts to alleviate the need for Gulp CLI to be installed globally 16 | * Updated Babel core/preset-env and Gulp to their latest versions 17 | * Replaced gulp-uglifyes with gulp-terser 18 | * Added the ability to set a default message within MouseTip's constructor function 19 | 20 | ### [Version 2.1.3 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.3) 21 | This patch update includes updated dependencies due to isses with Lodash < 4.17.11. Here's the details: 22 | * Updated gulp-babel, gulp-header, gulp-inject-string, gulp-rename, gulp-uglify, and gulp-uglifyes to their latest versions 23 | * Swapped babel-core and babel-preset-env with @babel/core @babel/preset-env, which required updating the Babel RC file 24 | 25 | ### [Version 2.1.2 - Gulp Watch Fix](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.2) 26 | Another minor update in the same day? Yeah, I made a mistake; Here's what I fixed: 27 | * The build-system's `gulp watch` task is now working 28 | 29 | ### [Version 2.1.1 - Security Vulnerability Fixes](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.1) 30 | This minor update includes some fixes related to security vulnerabilities! Here's the details: 31 | * Gulp was updated to 4.0 to fix security vulnerabilities 32 | * The build-system was restructured to work with the new version of Gulp 33 | 34 | ### [Version 2.1.0 - CommonJS & ES2015 Modules](https://github.com/joeleisner/purejs-mousetip/releases/tag/v2.1.0) 35 | This version now includes CommonJS & ES2015 modules to more easily include Pure JS MouseTip into your projects! Here's the details: 36 | * Modules can be found in the `dist/modules` directory 37 | * The CommonJS module exports the class as: `module.exports = MouseTip;` 38 | * The ES2015 module exports the class as: `export default MouseTip;` 39 | 40 | Read about previous releases in the [changelog](changelog.md). 41 | 42 | ## Installation 43 | ```shell 44 | npm i purejs-mousetip 45 | ``` 46 | Simply include the `mousetip.js` or `mousetip.min.js` script at the bottom of your document. Than initialize it by creating a new MouseTip instance, and call `.start()` on it. That's it! 47 | ```html 48 | 49 | 53 | ``` 54 | You can also use the ES2015 variants if you're not concerned about supporting older browsers by using the `mousetip.es2015.js` or `mousetip.es2015.min.js` scripts instead. 55 | 56 | ## How to Use 57 | Create an element and give it the `mousetip` attribute as well as a `mousetip-msg` attribute with the message you'd like the tooltip to display. Check out the live demo at [joeleisner.com/purejs-mousetip](http://joeleisner.com/purejs-mousetip) 58 | ```html 59 |
60 |
61 | ``` 62 | There are also other attributes you can use on your MouseTip elements to tweak your tooltips: 63 | 64 | Attribute | Description | Default | Example 65 | --- | --- | --- | --- 66 | `mousetip-pos` | Alters the vertical/horizontal alignment of the tooltip relative to the mouse cursor. The attribute takes a string that is space separated, the first value for vertical alignment, and the second value for horizontal alignment. The vertical alignment options are `bottom`, `center`, `top`, and the horizontal alignment options are `right`, `center`, `left` (Warning: the use of `center center` is not advised; causes flickering) | `bottom right` | `
` 67 | `mousetip-css-zindex` | Alters the CSS z-index of the tooltip | `9999` | `
` 68 | `mousetip-css-position` | Alters the CSS position of the tooltip | `absolute` | `
` 69 | `mousetip-css-padding` | Alters the CSS padding of the tooltip | `15px` | `
` 70 | `moutstip-css-borderradius` | Alters the CSS border-radius of the tooltip | `4px` | `
` 71 | `mousetip-css-background` | Alters the CSS background color of the tooltip | `rgba(0,0,0,0.75)` | `
` 72 | `mousetip-css-color` | Alters the CSS text color of the tooltip | `#fff` | `
` 73 | `mousetip-enable-html` or `mousetip-disable-html` | Enables/disables the use of valid HTML within the tooltip message. | `true` | `
` 74 | 75 | These inline/attribute adjustments will supersede default and user-set global settings. 76 | 77 | In addition to the element attribute adjustments above, you can also set global adjustments on any instance of the MouseTip constructor: 78 | ```html 79 | 80 | 96 | ``` 97 | This will globally affect all MouseTips of that instance. Keep in mind that element attribute adjustments will supersede global adjustments. 98 | 99 | The only global adjustments that do not have element attribute counterparts are the `selector` and `stylesheet` setting: 100 | * `selector` changes the attribute prefix the constructor should look for on start. By default, this is set to `mousetip`. 101 | * `stylesheet` tells the constructor not to include inline styling, and instead expects the mousetip styling to be included in some stylesheet on the page. By default, this is set to `false`, but can still be overwritten by element attributes when enabled. 102 | 103 | ## How to Build 104 | If you're like me, and want to tweak the source files of the script yourself, you can easily get going by doing the following: 105 | 106 | ### Installation 107 | ```shell 108 | git clone git@github.com:joeleisner/purejs-mousetip.git 109 | cd purejs-mousetip 110 | npm i 111 | ``` 112 | 113 | ### Development 114 | ```shell 115 | # npm run * / npx gulp * 116 | 117 | # Build all script variants 118 | npm run build 119 | 120 | # Build specific, non-module scripts 121 | npm run build-es2015 122 | npm run build-legacy 123 | 124 | # Build all module scripts 125 | npm run build-modules 126 | 127 | # Build specific module scripts 128 | npm run build-commonjs-module 129 | npm run build-es2015-module 130 | 131 | # Build all script varianst while watching for changes 132 | npm run watch 133 | ``` 134 | 135 | ## Feedback 136 | If you run into any problems when using this script, would like to suggest new features for this script, or need help understanding how to use this script, please put in an issue or make a pull request. --------------------------------------------------------------------------------