From 979bdb466a12211434f0c8fd76f6b89f92182bda Mon Sep 17 00:00:00 2001 From: MikeTheReader Date: Fri, 18 Apr 2014 15:17:40 -0700 Subject: [PATCH 1/4] Implemented auto-positioning of tooltip windows. --- example/auto-position/index.html | 99 +++++++++++++++++++++++++ intro.js | 119 +++++++++++++++++++++++++++++-- introjs.css | 16 +++++ minified/intro.min.js | 52 +++++++------- minified/introjs.min.css | 2 +- 5 files changed, 256 insertions(+), 32 deletions(-) create mode 100644 example/auto-position/index.html diff --git a/example/auto-position/index.html b/example/auto-position/index.html new file mode 100644 index 000000000..57edd5e1e --- /dev/null +++ b/example/auto-position/index.html @@ -0,0 +1,99 @@ + + + + + Auto Positioning + + + + + + + + + + + + + + + + + + +
+ +

Intro.js

+
+ +
+ +
+

Auto Positioning

+

This is IntroJs with tooltipPosition set to auto.

+ Show me how +
+ +
+ +
+
+

Section One

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Two

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Three

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+ +
+

Section Four

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Five

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Six

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +
+ +
+
+

Section Seven

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+ +
+
+

Section Eight

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+ + +
+
+

Section Nine

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+
+ +
+ + + diff --git a/intro.js b/intro.js index 505d8fd56..193fbdec2 100644 --- a/intro.js +++ b/intro.js @@ -55,7 +55,9 @@ /* Show tour bullets? */ showBullets: true, /* Scroll to highlighted element? */ - scrollToElement: true + scrollToElement: true, + /* Precedence of positions, when auto is enabled */ + positionPrecedence:["bottom", "top", "right", "left"] }; } @@ -412,22 +414,46 @@ var tooltipCssClass = this._options.tooltipClass; var currentTooltipPosition = this._introItems[this._currentStep].position; + if ((currentTooltipPosition == "auto" || this._options.tooltipPosition == "auto")) { + if (currentTooltipPosition != "floating") { // Floating is always valid, no point in calculating + currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition) + } + } + var targetOffset = _getOffset(targetElement) + var tooltipHeight = _getOffset(tooltipLayer).height + var windowSize = _getWinSize() switch (currentTooltipPosition) { case 'top': tooltipLayer.style.left = '15px'; - tooltipLayer.style.top = '-' + (_getOffset(tooltipLayer).height + 10) + 'px'; + tooltipLayer.style.top = '-' + (tooltipHeight + 10) + 'px'; arrowLayer.className = 'introjs-arrow bottom'; break; case 'right': tooltipLayer.style.left = (_getOffset(targetElement).width + 20) + 'px'; + if (targetOffset.top + tooltipHeight > windowSize.height) { + // In this case, right would have fallen below the bottom of the screen. + // Modify so that the bottom of the tooltip connects with the target + arrowLayer.className = "introjs-arrow left-bottom"; + tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - 20) + "px" + } arrowLayer.className = 'introjs-arrow left'; break; - case 'left': + case 'left': if (this._options.showStepNumbers == true) { tooltipLayer.style.top = '15px'; } - tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px'; - arrowLayer.className = 'introjs-arrow right'; + + if (targetOffset.top + tooltipHeight > windowSize.height) { + // In this case, left would have fallen below the bottom of the screen. + // Modify so that the bottom of the tooltip connects with the target + tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - 20) + "px" + arrowLayer.className = 'introjs-arrow right-bottom'; + } else { + arrowLayer.className = 'introjs-arrow right'; + } + tooltipLayer.style.right = (targetOffset.width + 20) + 'px'; + + break; case 'floating': arrowLayer.style.display = 'none'; @@ -450,11 +476,90 @@ // Bottom going to follow the default behavior default: tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px'; + tooltipLayer.style.left = (_getOffset(targetElement).width/2 - _getOffset(tooltipLayer).width / 2) + 'px'; + arrowLayer.className = 'introjs-arrow top'; break; } } + + /** + * Determines the position of the tooltip based on the position precedence and availability + * of screen space. + * + * @param {Object} targetElement + * @param {Object} tooltipLayer + * @param {Object} desiredTooltipPosition + * + */ + function _determineAutoPosition(targetElement, tooltipLayer, desiredTooltipPosition) { + + // Take a clone of position precedence. These will be the available + var possiblePositions = this._options.positionPrecedence.slice() + + var windowSize = _getWinSize() + var tooltipHeight = _getOffset(tooltipLayer).height + 10 + var tooltipWidth = _getOffset(tooltipLayer).width + 20 + var targetOffset = _getOffset(targetElement) + + // 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" + + // Check if the width of the tooltip + the starting point would spill off the right side of the screen + // If no, neither bottom or top are valid + if (targetOffset.left + tooltipWidth > windowSize.width || ((targetOffset.left + (targetOffset.width/2)) - tooltipWidth) < 0) { + _removeEntry(possiblePositions, "bottom") + _removeEntry(possiblePositions, "top"); + } else { + // Check for space below + if ((targetOffset.height + targetOffset.top + tooltipHeight) > windowSize.height) { + _removeEntry(possiblePositions, "bottom") + } + + // Check for space above + if (targetOffset.top - tooltipHeight < 0) { + _removeEntry(possiblePositions, "top"); + } + } + + // Check for space to the right + if (targetOffset.width + targetOffset.left + tooltipWidth > windowSize.width) { + _removeEntry(possiblePositions, "right"); + } + + // Check for space to the left + if (targetOffset.left - tooltipWidth < 0) { + _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 the requested position is in the list, replace our calculated choice with that + if (desiredTooltipPosition && desiredTooltipPosition != "auto") { + if (possiblePositions.indexOf(desiredTooltipPosition) > -1) { + calculatedPosition = desiredTooltipPosition + } + } + + return calculatedPosition + } + /** + * Remove an entry from a string array if it's there, does nothing if it isn't there. + * + * @param {Array} stringArray + * @param {String} stringToRemove + */ + function _removeEntry(stringArray, stringToRemove) { + if (stringArray.indexOf(stringToRemove) > -1) { + stringArray.splice(stringArray.indexOf(stringToRemove), 1); + } + } + /** * Update the position of the helper layer on the screen * @@ -554,7 +659,9 @@ //show the tooltip oldtooltipContainer.style.opacity = 1; - oldHelperNumberLayer.style.opacity = 1; + if (oldHelperNumberLayer != null) { + oldHelperNumberLayer.style.opacity = 1; + } }, 350); } else { diff --git a/introjs.css b/introjs.css index 760d7d15b..dde9a5f1b 100644 --- a/introjs.css +++ b/introjs.css @@ -97,6 +97,14 @@ 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; @@ -112,6 +120,14 @@ 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 { position: absolute; diff --git a/minified/intro.min.js b/minified/intro.min.js index 934d16cdf..a55517d76 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,26 +1,28 @@ -(function(q,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(q)})(this,function(q){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||"undefined"!=typeof a.nodeType)return a; -var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){this._direction="forward";"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}}function y(){this._direction= -"backward";if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);(a=document.querySelector(".introjsFloatingElement"))&&a.parentNode.removeChild(a); -if(a=document.querySelector(".introjs-showElement"))a.className=a.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");if((a=document.querySelectorAll(".introjs-fixParent"))&&0 a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1;e.style.opacity=1},350)}else{var j=document.createElement("div"),l=document.createElement("div"),h=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),f=document.createElement("div"); -j.className="introjs-helperLayer";w.call(c,j);this._targetElement.appendChild(j);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bh)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(h=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=h.bottom-(h.bottom-h.top),h=h.bottom- -b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,h+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function D(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay"; -if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var e=p(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(a){var b={}; -b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var v=function(a){if("object"===typeof a)return new f(a);if("string"===typeof a){if(a=document.querySelector(a))return new f(a);throw Error("There is no element with given selector.");}return new f(document.body)};v.version="0.8.0";v.fn=f.prototype={clone:function(){return new f(this)},setOption:function(a,b){this._options[a]= -b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){a:{var a=this._targetElement,b=[],c=this;if(this._options.steps)for(var d=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;ed.length)return!1;e=0;for(g=d.length;eh.width||0>l.left+l.width/2-m?(s(g,"bottom"),s(g,"top")):(l.height+l.top+k>h.height&&s(g,"bottom"),0>l.top-k&&s(g,"top"));l.width+l.left+m>h.width&&s(g,"right");0>l.left-m&&s(g,"left");0k.height&&(c.className="introjs-arrow left-bottom",b.style.top="-"+(h-g.height-20)+"px");c.className="introjs-arrow left";break;case "left":!0==this._options.showStepNumbers&&(b.style.top="15px");g.top+h>k.height?(b.style.top="-"+(h-g.height-20)+"px",c.className="introjs-arrow right-bottom"): +c.className="introjs-arrow right";b.style.right=g.width+20+"px";break;case "floating":c.style.display="none";a=r(b);b.style.left="50%";b.style.top="50%";b.style.marginLeft="-"+a.width/2+"px";b.style.marginTop="-"+a.height/2+"px";"undefined"!=typeof d&&null!=d&&(d.style.left="-"+(a.width/2+18)+"px",d.style.top="-"+(a.height/2+18)+"px");break;default:b.style.bottom="-"+(r(b).height+10)+"px",b.style.left=r(a).width/2-r(b).width/2+"px",c.className="introjs-arrow top"}}}function s(a,b){-1 a.active").className= +"";c.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";h.style.opacity=1;null!=d&&(d.style.opacity=1)},350)}else{var k=document.createElement("div"),q=document.createElement("div"),p=document.createElement("div"),m=document.createElement("div"),l=document.createElement("div"),n=document.createElement("div");k.className="introjs-helperLayer";y.call(b,k);this._targetElement.appendChild(k);q.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML= +a.intro;l.className="introjs-bullets";!1===this._options.showBullets&&(l.style.display="none");for(var s=document.createElement("ul"),f=0,v=this._introItems.length;fp)f.className+=" introjs-fixParent";f=f.parentNode}I(a.element)||!0!==this._options.scrollToElement||(p=a.element.getBoundingClientRect(),f=B().height,q=p.bottom-(p.bottom-p.top),p=p.bottom-f,0>q||a.element.clientHeight>f?window.scrollBy(0,q-30):window.scrollBy(0,p+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function C(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c= +document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function B(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function I(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&&a.right<=window.innerWidth}function H(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay"; +if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var e=r(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(x.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function r(a){var b={}; +b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var u=function(a){if("object"===typeof a)return new n(a);if("string"===typeof a){if(a=document.querySelector(a))return new n(a);throw Error("There is no element with given selector.");}return new n(document.body)};u.version="0.8.0";u.fn=n.prototype={clone:function(){return new n(this)},setOption:function(a,b){this._options[a]= +b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){G.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&w.call(this);return this},nextStep:function(){w.call(this);return this},previousStep:function(){A.call(this);return this},exit:function(){x.call(this,this._targetElement)},refresh:function(){y.call(this,document.querySelector(".introjs-helperLayer")); return this},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange was not a function"); -return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return q.introJs=v}); +return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return v.introJs=u}); diff --git a/minified/introjs.min.css b/minified/introjs.min.css index 7d0e62b5e..6290b0521 100644 --- a/minified/introjs.min.css +++ b/minified/introjs.min.css @@ -1 +1 @@ -.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto !important;opacity:1.0 !important}.introjs-showElement{z-index:9999999 !important}.introjs-relativePosition{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999 !important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;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.right{right:-10px;top: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.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file +.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto !important;opacity:1.0 !important}.introjs-showElement{z-index:9999999 !important}.introjs-relativePosition{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999 !important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;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.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.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{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file From e114b62a97909c1ca2841dee9e9f55866604f600 Mon Sep 17 00:00:00 2001 From: MikeTheReader Date: Wed, 23 Apr 2014 08:12:19 -0700 Subject: [PATCH 2/4] Keep floating element from being obscured by item. Modified code so that 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. --- example/auto-position/index.html | 1 - intro.js | 36 ++++++++++++++------ introjs.css | 8 ++++- minified/intro.min.js | 57 ++++++++++++++++---------------- minified/introjs.min.css | 2 +- 5 files changed, 62 insertions(+), 42 deletions(-) diff --git a/example/auto-position/index.html b/example/auto-position/index.html index 57edd5e1e..e722f081d 100644 --- a/example/auto-position/index.html +++ b/example/auto-position/index.html @@ -18,7 +18,6 @@