added top-[right|middle]-aligned to options for autopositioning; simp…

…lified css; added scroll position to autopositioning to determine position relative to screen;
yassine-mahjoubi · Oct 3, 2017 · 651b642 · 651b642
1 parent 1a3dea2
commit 651b642
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 36 deletions.
diff --git a/example/hint/index.html b/example/hint/index.html
@@ -15,6 +15,23 @@
     <link href="../../introjs.css" rel="stylesheet">
 
     <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
+
+    <style>
+    .btn-group-justified {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -ms-flex-flow: row nowrap;
+      flex-flow: row nowrap;
+    }
+    .btn-group-justified > * {
+      -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+    }
+    </style>
   </head>
 
   <body>
@@ -35,7 +52,7 @@ <h3 class="muted">
       <hr>
 
       <div class="jumbotron">
-        <h1 data-hint="This is a tooltip!" data-hintPosition="top-middle" data-position="bottom-right-aligned">Hints</h1>
+        <h1 data-hint="This is a tooltip!" data-hintPosition="top-middle" data-position="top">Hints</h1>
         <p class="lead">Add hints using <code>data-hint</code> attribute.</p>
         <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().addHints();">Add hints</a>
       </div>
@@ -68,6 +85,30 @@ <h4>Section Six</h4>
       </div>
 
       <hr>
+
+      <div class="btn-group btn-group-justified" role="group" aria-label="...">
+          <button 
+            type="button"
+            role="button"
+            data-hint="Left align" 
+            data-hintPosition="top-middle" 
+            data-position="bottom"
+            class="btn btn-default">Left</button>
+          <button 
+            type="button"
+            role="button"
+            data-hint="Middle align" 
+            data-hintPosition="top-middle" 
+            data-position="bottom"
+            class="btn btn-default">Middle</button>
+          <button 
+            type="button"
+            role="button"
+            data-hint="Right align" 
+            data-hintPosition="top-middle" 
+            data-position="bottom"
+            class="btn btn-default">Right</button>
+        </div>
     </div>
     <script type="text/javascript" src="../../intro.js"></script>
   </body>

diff --git a/intro.js b/intro.js
@@ -621,8 +621,9 @@
     tooltipOffset = _getOffset(tooltipLayer);
     windowSize    = _getWinSize();
 
-    // determine special-case bottom align, for optimum visibility
-    if (currentTooltipPosition === 'bottom') {
+    // determine special-case bottom and top align, for optimum visibility
+    if (currentTooltipPosition === 'bottom' ||
+      currentTooltipPosition === 'top') {
       var screenWidth = window.screen.width,
           screenThird = screenWidth / 3,
           targetLeft = targetOffset.left;
@@ -631,17 +632,44 @@
         // hint is greater than 1/3 of the screen width
         if (targetLeft < (screenWidth - screenThird)) {
           // hint is less than 2/3 of the screen width
-          currentTooltipPosition = 'bottom-middle-aligned';
+          currentTooltipPosition += '-middle-aligned';
         } else {
           // hint is greater than 2/3 of the screen width
-          currentTooltipPosition = 'bottom-right-aligned';
+          currentTooltipPosition += '-right-aligned';
         }
       }
     }
 
     _setClass(tooltipLayer, 'introjs-' + currentTooltipPosition);
 
     switch (currentTooltipPosition) {
+      case 'top-right-aligned':
+        arrowLayer.className      = 'introjs-arrow bottom-right';
+
+        var tooltipLayerStyleRight = 0;
+        _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
+        tooltipLayer.style.bottom    = (targetOffset.height +  20) + 'px';
+        break;
+
+      case 'top-middle-aligned':
+        arrowLayer.className      = 'introjs-arrow bottom-middle';
+
+        var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
+
+        // a fix for middle aligned hints
+        if (hintMode) {
+          tooltipLayerStyleLeftRight += 5;
+        }
+
+        if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
+          tooltipLayer.style.right = null;
+          _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer);
+        }
+        tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px';
+        break;
+
+      case 'top-left-aligned':
+      // top-left-aligned is the same as the default top
       case 'top':
         arrowLayer.className = 'introjs-arrow bottom';
 
@@ -779,11 +807,18 @@
     // Take a clone of position precedence. These will be the available
     var possiblePositions = this._options.positionPrecedence.slice();
 
+    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
     var windowSize = _getWinSize();
     var tooltipHeight = _getOffset(tooltipLayer).height + 10;
     var tooltipWidth = _getOffset(tooltipLayer).width + 20;
     var targetOffset = _getOffset(targetElement);
 
+    // adjust for scroll position
+    targetOffset.top -= scrollTop;
+    targetOffset.left -= scrollLeft;
+
     // If we check all the possible areas, and there are no valid places for the tooltip, the element
     // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen.
     var calculatedPosition = "floating";
@@ -808,15 +843,24 @@
       _removeEntry(possiblePositions, "left");
     }
 
-    // At this point, our array only has positions that are valid. Pick the first one, as it remains in order
-    if (possiblePositions.length > 0) {
-      calculatedPosition = possiblePositions[0];
+    if (desiredTooltipPosition) {
+      // filter out hyphenated positions to return
+      // a valid option from the list
+      // ex: "bottom-right-aligned"
+      // should return 'bottom'
+      // todo: actually return 'bottom-right-aligned'
+      desiredTooltipPosition = desiredTooltipPosition.split('-')[0];
     }
 
-    // If the requested position is in the list, replace our calculated choice with that
-    if (desiredTooltipPosition && desiredTooltipPosition != "auto") {
-      if (possiblePositions.indexOf(desiredTooltipPosition) > -1) {
+    if (possiblePositions.length) {
+      if (desiredTooltipPosition && 
+          desiredTooltipPosition !== "auto" &&
+          possiblePositions.indexOf(desiredTooltipPosition) > -1) {
+        // If the requested position is in the list, choose that
         calculatedPosition = desiredTooltipPosition;
+      } else {
+        // Pick the first valid position, in order
+        calculatedPosition = possiblePositions[0];
       }
     }
 

diff --git a/introjs.css b/introjs.css
@@ -122,72 +122,59 @@ tr.introjs-showElement > th {
 }
 
 .introjs-arrow {
-  border: 5px solid white;
+  border: 5px solid transparent;
   content:'';
   position: absolute;
 }
 .introjs-arrow.top {
   top: -10px;
-  border-top-color:transparent;
-  border-right-color:transparent;
   border-bottom-color:white;
-  border-left-color:transparent;
 }
 .introjs-arrow.top-right {
   top: -10px;
   right: 10px;
-  border-top-color:transparent;
-  border-right-color:transparent;
   border-bottom-color:white;
-  border-left-color:transparent;
 }
 .introjs-arrow.top-middle {
   top: -10px;
   left: 50%;
   margin-left: -5px;
-  border-top-color:transparent;
-  border-right-color:transparent;
   border-bottom-color:white;
-  border-left-color:transparent;
 }
 .introjs-arrow.right {
   right: -10px;
   top: 10px;
-  border-top-color:transparent;
-  border-right-color:transparent;
-  border-bottom-color:transparent;
   border-left-color:white;
 }
 .introjs-arrow.right-bottom {
   bottom:10px;
   right: -10px;
-  border-top-color:transparent;
-  border-right-color:transparent;
-  border-bottom-color:transparent;
   border-left-color:white;
 }
 .introjs-arrow.bottom {
   bottom: -10px;
   border-top-color:white;
-  border-right-color:transparent;
-  border-bottom-color:transparent;
-  border-left-color:transparent;
+}
+.introjs-arrow.bottom-right {
+  bottom: -10px;
+  right: 10px;
+  border-top-color:white;
+}
+.introjs-arrow.bottom-middle {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+  border-top-color:white;
 }
 .introjs-arrow.left {
   left: -10px;
   top: 10px;
-  border-top-color:transparent;
   border-right-color:white;
-  border-bottom-color:transparent;
-  border-left-color:transparent;
 }
 .introjs-arrow.left-bottom {
   left: -10px;
   bottom:10px;
-  border-top-color:transparent;
   border-right-color:white;
-  border-bottom-color:transparent;
-  border-left-color:transparent;
 }
 
 .introjs-tooltip {