Permalink
Browse files

Add custom css class for tooltips + complete examples

  • Loading branch information...
1 parent 4a36819 commit 32d83041087a6a60184e19ee587d2ad729292294 @afshinm afshinm committed Jul 18, 2013
Showing with 112 additions and 3 deletions.
  1. +84 −0 example/custom-class/index.html
  2. +1 −0 example/index.html
  3. +27 −3 intro.js
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Custom CSS Class</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
+ <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
+
+ <!-- styles -->
+ <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
+ <link href="../assets/css/demo.css" rel="stylesheet">
+
+ <!-- Add IntroJs styles -->
+ <link href="../../introjs.css" rel="stylesheet">
+
+ <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
+ <style>
+ .forLastStep {
+ font-weight: bold;
+ }
+ .customDefault {
+ color: gray;
+ }
+ .customDefault .introjs-skipbutton {
+ border-radius: 0;
+ color: red;
+ }
+ </style>
+ </head>
+
+ <body>
+
+ <div class="container-narrow">
+
+ <div class="masthead">
+ <ul class="nav nav-pills pull-right" data-step="5" data-tooltipClass='forLastStep' data-intro="Get it, use it.">
+ <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
+ <li><a href="https://github.com/usablica/intro.js">Github</a></li>
+ <li><a href="https://twitter.com/usablica">@usablica</a></li>
+ </ul>
+ <h3 class="muted">Intro.js</h3>
+ </div>
+
+ <hr>
+
+ <div class="jumbotron">
+ <h1 data-step="1" data-intro="This is a tooltip!">Custom Class</h1>
+ <p class="lead" data-step="4" data-intro="Another step.">Add custom CSS class to tooltip boxes using <code>data-tooltipClass</code> attribute and <code>tooltipClass</code> option.</p>
+ <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('tooltipClass', 'customDefault').start();">Show me how</a>
+ </div>
+
+ <hr>
+
+ <div class="row-fluid marketing">
+ <div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
+ <h4>Section One</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+ <h4>Section Two</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+ <h4>Section Three</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+ </div>
+
+ <div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
+ <h4>Section Four</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+ <h4>Section Five</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+ <h4>Section Six</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+ </div>
+ </div>
+
+ <hr>
+ </div>
+ <script type="text/javascript" src="../../intro.js"></script>
+ </body>
+</html>
View
@@ -26,6 +26,7 @@ <h3 class="muted">Examples</h3>
<li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
<li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
<li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
+ <li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
</ul>
</div>
</body>
View
@@ -30,13 +30,23 @@
this._targetElement = obj;
this._options = {
+ /* Next button label in tooltip box */
nextLabel: 'Next &rarr;',
+ /* Previous button label in tooltip box */
prevLabel: '&larr; Back',
+ /* Skip button label in tooltip box */
skipLabel: 'Skip',
+ /* Done button label in tooltip box */
doneLabel: 'Done',
+ /* Default tooltip box position */
tooltipPosition: 'bottom',
+ /* Next CSS class for tooltip boxes */
+ tooltipClass: '',
+ /* Close introduction when pressing Escape button? */
exitOnEsc: true,
+ /* Close introduction when clicking on overlay layer? */
exitOnOverlayClick: true,
+ /* Show step numbers in introduction? */
showStepNumbers: true
};
}
@@ -84,6 +94,7 @@
element: currentElement,
intro: currentElement.getAttribute('data-intro'),
step: parseInt(currentElement.getAttribute('data-step'), 10),
+ tooltipClass: currentElement.getAttribute('data-tooltipClass'),
position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
});
}
@@ -271,6 +282,21 @@
//prevent error when `this._currentStep` is undefined
if(!this._introItems[this._currentStep]) return;
+ var tooltipCssClass = '';
+
+ //if we have a custom css class for each step
+ var currentStepObj = this._introItems[this._currentStep];
+ if (typeof (currentStepObj.tooltipClass) === 'string') {
+ tooltipCssClass = currentStepObj.tooltipClass;
+ } else {
+ tooltipCssClass = this._options.tooltipClass;
+ }
+
+ tooltipLayer.className = ('introjs-tooltip ' + tooltipCssClass).replace(/^\s+|\s+$/g, '');
+
+ //custom css class for tooltip boxes
+ var tooltipCssClass = this._options.tooltipClass;
+
var currentTooltipPosition = this._introItems[this._currentStep].position;
switch (currentTooltipPosition) {
case 'top':
@@ -329,7 +355,7 @@
if (typeof (this._introChangeCallback) !== 'undefined') {
this._introChangeCallback.call(this, targetElement.element);
}
-
+
var self = this,
oldHelperLayer = document.querySelector('.introjs-helperLayer'),
elementPosition = _getOffset(targetElement.element);
@@ -391,9 +417,7 @@
this._targetElement.appendChild(helperLayer);
arrowLayer.className = 'introjs-arrow';
- tooltipLayer.className = 'introjs-tooltip';
-
tooltipLayer.innerHTML = '<div class="introjs-tooltiptext">' +
targetElement.intro +
'</div><div class="introjs-tooltipbuttons"></div>';

0 comments on commit 32d8304

Please sign in to comment.