Keep floating element from being obscured by item. Modified code so t…

…hat there is a helper layer and a reference layer. The reference layer allows the z-index of the tooltip to be controlled independently of the "glow" layer, which allows it to sit on top. Also moved numbers in a bit as they were showing up off the screen in some cases.
danishin · Apr 23, 2014 · e114b62 · e114b62
1 parent 979bdb4
commit e114b62
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 42 deletions.
diff --git a/example/auto-position/index.html b/example/auto-position/index.html
@@ -18,7 +18,6 @@
 	<script>
 		function startTour() {
 			var tour = introJs()
-			tour.setOption('showStepNumbers', false);
 			tour.setOption('tooltipPosition', 'auto');
 			tour.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
 			tour.start()

diff --git a/intro.js b/intro.js
@@ -207,6 +207,7 @@
 
       self._onResize = function(e) {
         _setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
+        _setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
       };
 
       if (window.addEventListener) {
@@ -339,6 +340,11 @@
       helperLayer.parentNode.removeChild(helperLayer);
     }
 
+    var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer');
+    if (referenceLayer) {
+      referenceLayer.parentNode.removeChild(referenceLayer);
+    }
+
     //remove intro floating element
     var floatingElement = document.querySelector('.introjsFloatingElement');
     if (floatingElement) {
@@ -585,6 +591,7 @@
                                         'height:' + (elementPosition.height + widthHeightPadding)  + 'px; ' +
                                         'top:'    + (elementPosition.top    - 5)   + 'px;' +
                                         'left: '  + (elementPosition.left   - 5)   + 'px;');
+
     }
   }
 
@@ -603,16 +610,17 @@
 
     var self = this,
         oldHelperLayer = document.querySelector('.introjs-helperLayer'),
+        oldReferenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'),
         elementPosition = _getOffset(targetElement.element);
 
     if (oldHelperLayer != null) {
-      var oldHelperNumberLayer = oldHelperLayer.querySelector('.introjs-helperNumberLayer'),
-          oldtooltipLayer      = oldHelperLayer.querySelector('.introjs-tooltiptext'),
-          oldArrowLayer        = oldHelperLayer.querySelector('.introjs-arrow'),
-          oldtooltipContainer  = oldHelperLayer.querySelector('.introjs-tooltip'),
-          skipTooltipButton    = oldHelperLayer.querySelector('.introjs-skipbutton'),
-          prevTooltipButton    = oldHelperLayer.querySelector('.introjs-prevbutton'),
-          nextTooltipButton    = oldHelperLayer.querySelector('.introjs-nextbutton');
+      var oldHelperNumberLayer = oldReferenceLayer.querySelector('.introjs-helperNumberLayer'),
+          oldtooltipLayer      = oldReferenceLayer.querySelector('.introjs-tooltiptext'),
+          oldArrowLayer        = oldReferenceLayer.querySelector('.introjs-arrow'),
+          oldtooltipContainer  = oldReferenceLayer.querySelector('.introjs-tooltip'),
+          skipTooltipButton    = oldReferenceLayer.querySelector('.introjs-skipbutton'),
+          prevTooltipButton    = oldReferenceLayer.querySelector('.introjs-prevbutton'),
+          nextTooltipButton    = oldReferenceLayer.querySelector('.introjs-nextbutton');
 
       //hide the tooltip
       oldtooltipContainer.style.opacity = 0;
@@ -627,6 +635,7 @@
 
       //set new position to helper layer
       _setHelperLayerPosition.call(self, oldHelperLayer);
+      _setHelperLayerPosition.call(self, oldReferenceLayer);
 
       //remove `introjs-fixParent` class from the elements
       var fixParents = document.querySelectorAll('.introjs-fixParent');
@@ -654,8 +663,8 @@
         _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
 
         //change active bullet
-        oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = '';
-        oldHelperLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
+        oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = '';
+        oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
 
         //show the tooltip
         oldtooltipContainer.style.opacity = 1;
@@ -666,19 +675,23 @@
 
     } else {
       var helperLayer       = document.createElement('div'),
+          referenceLayer    = document.createElement('div'),
           arrowLayer        = document.createElement('div'),
           tooltipLayer      = document.createElement('div'),
           tooltipTextLayer  = document.createElement('div'),
           bulletsLayer      = document.createElement('div'),
           buttonsLayer      = document.createElement('div');
 
       helperLayer.className = 'introjs-helperLayer';
+      referenceLayer.className = 'introjs-tooltipReferenceLayer';
 
       //set new position to helper layer
       _setHelperLayerPosition.call(self, helperLayer);
+      _setHelperLayerPosition.call(self, referenceLayer);
 
       //add helper layer to target element
       this._targetElement.appendChild(helperLayer);
+      this._targetElement.appendChild(referenceLayer);
 
       arrowLayer.className = 'introjs-arrow';
 
@@ -727,10 +740,10 @@
         var helperNumberLayer = document.createElement('span');
         helperNumberLayer.className = 'introjs-helperNumberLayer';
         helperNumberLayer.innerHTML = targetElement.step;
-        helperLayer.appendChild(helperNumberLayer);
+        referenceLayer.appendChild(helperNumberLayer);
       }
       tooltipLayer.appendChild(arrowLayer);
-      helperLayer.appendChild(tooltipLayer);
+      referenceLayer.appendChild(tooltipLayer);
 
       //next button
       var nextTooltipButton = document.createElement('a');
@@ -1071,6 +1084,7 @@
     },
     refresh: function() {
       _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
+      _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
       return this;
     },
     onbeforechange: function(providedCallback) {

diff --git a/introjs.css b/introjs.css
@@ -48,10 +48,16 @@
           transition: all 0.3s ease-out;
 }
 
+.introjs-tooltipReferenceLayer {
+  position: absolute;
+  z-index: 10000000;
+  background-color: transparent;
+}
+
 .introjs-helperNumberLayer {
   position: absolute;
   top: -16px;
-  left: -16px;
+  left: 16px;
   z-index: 9999999999 !important;
   padding: 2px;
   font-family: Arial, verdana, tahoma;