Tooltip position can be set on a per-step basis by setting an element's data-position to 'top', 'right', 'bottom', or 'left.

The "arrow" was refactored into its own element for cross-browser compatibility since :before can be problematic in <= IE8. Removed the timeout for moving the tooltip, as the delay was causing the tooltip not to size properly. Added _placeTooltip method that uses targetElement, tooltipLayer, and arrowLayer as parameters, then sets the appropriate CSS styles for the tooltipLayer.

Author: Ben M

intro.js

@@ -43,7 +43,8 @@
       introItems.push({
         element: currentElement,
         intro: currentElement.getAttribute("data-intro"),
-        step: parseInt(currentElement.getAttribute("data-step"))
+        step: parseInt(currentElement.getAttribute("data-step")),
+        position: currentElement.getAttribute("data-position") || 'bottom'
       });
     }
 
@@ -141,6 +142,33 @@
     targetElement.onkeydown = null;
   }
 
+  function _placeTooltip(targetElement, tooltipLayer, arrowLayer){
+    var tooltipLayerPosition = _getOffset(tooltipLayer);
+    tooltipLayer.style.top = null;
+    tooltipLayer.style.right = null;
+    tooltipLayer.style.bottom = null;
+    tooltipLayer.style.left = null;
+    switch(targetElement.getAttribute('data-position')){
+      case 'top':
+        tooltipLayer.style.top = "-" + (tooltipLayerPosition.height + 10) + "px";
+        arrowLayer.className = 'introjs-arrow bottom';
+        break;
+      case 'right':
+        console.log(tooltipLayerPosition);
+        tooltipLayer.style.right = "-" + (tooltipLayerPosition.width + 10) + "px";
+        arrowLayer.className = 'introjs-arrow left';
+        break;
+      case 'bottom':
+        tooltipLayer.style.bottom = "-" + (tooltipLayerPosition.height + 10) + "px";
+        arrowLayer.className = 'introjs-arrow top';
+        break;
+      case 'left':
+        tooltipLayer.style.left = "-" + (tooltipLayerPosition.width + 10) + "px";
+        arrowLayer.className = 'introjs-arrow right';
+        break;
+    }
+  }
+
   /**
    * Show an element on the page
    *
@@ -158,6 +186,7 @@
     if(oldHelperLayer != null) {
       var oldHelperNumberLayer = oldHelperLayer.querySelector(".introjs-helperNumberLayer"),
           oldtooltipLayer = oldHelperLayer.querySelector(".introjs-tooltiptext"),
+          oldArrowLayer = oldHelperLayer.querySelector(".introjs-arrow"),
           oldtooltipContainer = oldHelperLayer.querySelector(".introjs-tooltip")
 
       //set new position to helper layer
@@ -173,17 +202,13 @@
       oldShowElement.className = oldShowElement.className.replace(/introjs-showElement/,'').trim();
       //change to new intro item
       targetElement.className += " introjs-showElement";
-
-      //wait until the animation is completed
-      setTimeout(function() {
-        oldtooltipContainer.style.bottom = "-" + (_getOffset(oldtooltipContainer).height + 10) + "px";
-      }, 300);
-
+      _placeTooltip(targetElement, oldtooltipContainer, oldArrowLayer);
     } else {
       targetElement.className += " introjs-showElement";
 
       var helperLayer = document.createElement("div"),
           helperNumberLayer = document.createElement("span"),
+          arrowLayer = document.createElement("div"),
           tooltipLayer = document.createElement("div");
 
       helperLayer.className = "introjs-helperLayer";
@@ -195,11 +220,13 @@
       document.body.appendChild(helperLayer);
 
       helperNumberLayer.className = "introjs-helperNumberLayer";
+      arrowLayer.className = 'introjs-arrow';
       tooltipLayer.className = "introjs-tooltip";
 
       helperNumberLayer.innerHTML = targetElement.getAttribute("data-step");
       tooltipLayer.innerHTML = "<div class='introjs-tooltiptext'>" + targetElement.getAttribute("data-intro") + "</div><div class='introjs-tooltipbuttons'></div>";
       helperLayer.appendChild(helperNumberLayer);
+      tooltipLayer.appendChild(arrowLayer);
       helperLayer.appendChild(tooltipLayer);
 
       var skipTooltipButton = document.createElement("a");
@@ -224,10 +251,9 @@
       var tooltipButtonsLayer = tooltipLayer.querySelector('.introjs-tooltipbuttons');
       tooltipButtonsLayer.appendChild(skipTooltipButton);
       tooltipButtonsLayer.appendChild(nextTooltipButton);
-      
-      
+
       //set proper position
-      tooltipLayer.style.bottom = "-" + (_getOffset(tooltipLayer).height + 10) + "px";
+      _placeTooltip(targetElement, tooltipLayer, arrowLayer);
     }
 
     //scroll the page to the element position

introjs.css

@@ -50,16 +50,40 @@
   left: -16px;
   top: -16px;
 }
-.introjs-tooltip:before {
+.introjs-arrow {
   border: 5px solid white;
-	content:'';
-	border-top-color:transparent;
-	border-right-color:transparent;
-	border-bottom-color:white;
-	border-left-color:transparent;
-	position: absolute;
-	top: -10px;
-
+  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;