Merge pull request usablica#677 from Simon-Briggs/center-hints

center hints and add all position combinations

Author: afshinm

docs/docs/hints/attributes.md

@@ -8,4 +8,4 @@ permalink: /hints/attributes/
 You can use these HTML attributes to manage or alter hint elements.
 
  - `data-hint`: The tooltip text of hint
- - `data-hintPosition`: Optionally define the position of hint. Options: `top-middle`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, `bottom-middle`. Default: `top-middle`
+ - `data-hintPosition`: Optionally define the position of hint. Options: `top-middle`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, `bottom-middle`, `middle-left`, `middle-right`, `middle-middle`. Default: `top-middle`

intro.js

@@ -1594,6 +1594,8 @@
   function _alignHintPosition(position, hint, element) {
     // get/calculate offset of target element
     var offset = _getOffset.call(this, element);
+    var iconWidth = 20;
+    var iconHeight = 20;
 
     // align the hint element
     switch (position) {
@@ -1603,23 +1605,35 @@
         hint.style.top = offset.top + 'px';
         break;
       case 'top-right':
-        hint.style.left = (offset.left + offset.width) + 'px';
+        hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
         hint.style.top = offset.top + 'px';
         break;
       case 'bottom-left':
         hint.style.left = offset.left + 'px';
-        hint.style.top = (offset.top + offset.height) + 'px';
+        hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
         break;
       case 'bottom-right':
-        hint.style.left = (offset.left + offset.width) + 'px';
-        hint.style.top = (offset.top + offset.height) + 'px';
+        hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
+        hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
+        break;
+      case 'middle-left':
+        hint.style.left = offset.left + 'px';
+        hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
+        break;
+      case 'middle-right':
+        hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
+        hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
+        break;
+      case 'middle-middle':
+        hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
+        hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
         break;
       case 'bottom-middle':
-        hint.style.left = (offset.left + (offset.width / 2)) + 'px';
-        hint.style.top = (offset.top + offset.height) + 'px';
+        hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
+        hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
         break;
       case 'top-middle':
-        hint.style.left = (offset.left + (offset.width / 2)) + 'px';
+        hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
         hint.style.top = offset.top + 'px';
         break;
     }