diff --git a/README.md b/README.md index 3689d61..8c02080 100644 --- a/README.md +++ b/README.md @@ -68,8 +68,14 @@ To apply the hoverer effect to an element you can use one of 2 methods: ``` -## What's New In version `1.2.x`? +## What's New In version `1.3.x`? -In this release a delay of 0.5s was added to match how the effect traditionally works in other programs. +In this release a couple of modifications where made to the size and positioning of the text box to match how the effect traditionally works in other programs. -For those looking for the removal of the delay, a `data-hoverer-options` attribute is being worked on, but for now you can just use version `1.0.3`. +For those who don't like the changes, do know that we are working on a `data-hoverer-options` data attribute and respective js function, which you can try out by downloading the file from the [data-hoverer-options branch](https://github.com/danielFHcode/hoverer/tree/data-hoverer-options) on github. Do note that the branch is still in alpha, so it may lack some features and it won't be well documented. + +Otherwise you can just download an older version of the package: + +```console +npm i hoverer@1.2.2 +``` diff --git a/hoverer.js b/hoverer.js index 5c26c68..29f8aeb 100644 --- a/hoverer.js +++ b/hoverer.js @@ -9,7 +9,7 @@ function applyHoverer(element,text){ * @type {HTMLSpanElement} */ const textElement = document.createElement('span'); - textElement.ariaHidden = true; + textElement.ariaHidden = textElement.hidden = true; textElement.innerText = text; textElement.style = ''+ 'position:absolute;'+ @@ -18,7 +18,7 @@ function applyHoverer(element,text){ 'border: 0.1em solid grey;'+ 'padding: 0.45em;'+ 'font-family: sans-serif;'+ - 'font-size: 0.8em;' + 'font-size: 0.7em;' document.body.appendChild(textElement); /* @@ -30,15 +30,20 @@ function applyHoverer(element,text){ isMouseOver = true; setTimeout(function(){ if (!isMouseOver) return; - const elementTrans = getTextBoxTrans(element); + const elementTrans = { + x:e.clientX, + y:e.clientY + }; + textElement.hidden = false; textElement.style.left = elementTrans.x+'px'; textElement.style.top = elementTrans.y+'px'; textElement.style.opacity = 1; },500) }) element.addEventListener('mouseleave',function(){ - isMouseOver = false; textElement.style.opacity = 0; + textElement.hidden = true; + isMouseOver = false; }) /** diff --git a/package.json b/package.json index b1197c6..0827862 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hoverer", - "version": "1.2.2", + "version": "1.3.0", "description": "make text appear on hover", "main": "hoverer.js", "scripts": {},