Permalink
Browse files

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.
  • Loading branch information...
1 parent 979bdb4 commit e114b62a97909c1ca2841dee9e9f55866604f600 @MikeTheReader MikeTheReader committed Apr 23, 2014
Showing with 62 additions and 42 deletions.
  1. +0 −1 example/auto-position/index.html
  2. +25 −11 intro.js
  3. +7 −1 introjs.css
  4. +29 −28 minified/intro.min.js
  5. +1 −1 minified/introjs.min.css
@@ -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()
View
@@ -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) {
View
@@ -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;
Oops, something went wrong.

0 comments on commit e114b62

Please sign in to comment.