Do the -webkit-transform:translate in js.

The -webkit-transform:translate(-4px, -4px) was added to move the hint
labels a little bit from the hinted links so that they do not cover to
much of the link text. But in this way the labels where sometime only
partial visible if the hinted element is near to the top or left.

This patch removes the css translate and calculates the offset direct
in the hints.js. So we can now ensure that the hint labels are not
placed behind the top or left of the viewport.

diff --git a/src/scripts/hints.css b/src/scripts/hints.css
index 1b51117..2ced834 100644 (file)
--- a/src/scripts/hints.css
+++ b/src/scripts/hints.css
@@ -1,5 +1,4 @@
 span[vimbhint^='label']{
-    -webkit-transform:translate(-4px,-4px);
     background-color:#fff;
     border:1px solid #444;
     color:#000;

diff --git a/src/scripts/hints.js b/src/scripts/hints.js
index c5acfd0..6efee48 100644 (file)
--- a/src/scripts/hints.js
+++ b/src/scripts/hints.js
@@ -175,8 +175,8 @@ var hints = Object.freeze((function(){
                 label = labelTmpl.cloneNode(false);
 
                 label.style.display = "none";
-                label.style.left    = rect.left + "px";
-                label.style.top     = rect.top + "px";
+                label.style.left    = Math.max(rect.left - 4, 0) + "px";
+                label.style.top     = Math.max(rect.top - 4, 0) + "px";
 
                 /* if hinted element is an image - show title or alt of the image in hint label */
                 /* this allows to see how to filter for the image */