Skip to content

Commit 4bfeb1f

Browse files
author
Johan Persson
committed
Added new bottom alignment options for the tooltip.
1 parent 10fab7d commit 4bfeb1f

File tree

3 files changed

+71
-36
lines changed

3 files changed

+71
-36
lines changed

‎README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,19 @@ Intro.js can be added to your site in three simple steps:
2121
2222
**2)** Add `data-intro` and `data-step` to your HTML elements.
2323

24-
For example:
24+
For example:
2525

2626
```html
2727
<a href='http://google.com/' data-intro='Hello step one!'></a>
2828
````
2929

3030
See all attributes [here](https://github.com/usablica/intro.js/#attributes).
31-
31+
3232
**3)** Call this JavaScript function:
3333
```javascript
3434
introJs().start();
3535
````
36-
36+
3737
Optionally, pass one parameter to `introJs` function to limit the presentation section.
3838

3939
**For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`.
@@ -314,7 +314,7 @@ introJs().onafterchange(function(targetElement) {
314314
- `data-intro`: The tooltip text of step
315315
- `data-step`: Optionally define the number (priority) of step
316316
- `data-tooltipClass`: Optionally define a CSS class for tooltip
317-
- `data-position`: Optionally define the position of tooltip, `top`, `left`, `right` or `bottom`. Default is `bottom`
317+
- `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom`
318318

319319
###Options:
320320

@@ -458,10 +458,10 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish
458458
- Fix show element for elements with position `absolute` or `relative`
459459
- Add `enter` key for navigating in steps
460460
- Code refactoring
461-
462-
463-
* **v0.1.0** - 2013-03-16
464-
- First commit.
461+
462+
463+
* **v0.1.0** - 2013-03-16
464+
- First commit.
465465

466466
## Author
467467
**Afshin Mehrabani**
@@ -480,15 +480,15 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish
480480
## License
481481
> Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com)
482482

483-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
484-
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
485-
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
483+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
484+
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
485+
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
486486
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
487-
The above copyright notice and this permission notice shall be included in all copies or substantial portions
487+
The above copyright notice and this permission notice shall be included in all copies or substantial portions
488488
of the Software.
489489

490-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
491-
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
492-
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
493-
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
490+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
491+
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
492+
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
493+
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
494494
IN THE SOFTWARE.

‎intro.js

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@
294294
*/
295295
function _previousStep() {
296296
this._direction = 'backward';
297-
297+
298298
if (this._currentStep === 0) {
299299
return false;
300300
}
@@ -317,7 +317,7 @@
317317
function _exitIntro(targetElement) {
318318
//remove overlay layer from the page
319319
var overlayLayer = targetElement.querySelector('.introjs-overlay');
320-
320+
321321
//return if intro already completed or skipped
322322
if (overlayLayer == null) {
323323
return;
@@ -363,7 +363,7 @@
363363
} else if (document.detachEvent) { //IE
364364
document.detachEvent('onkeydown', this._onKeyDown);
365365
}
366-
366+
367367
//set the step to zero
368368
this._currentStep = undefined;
369369
}
@@ -378,6 +378,11 @@
378378
* @param {Object} arrowLayer
379379
*/
380380
function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {
381+
var tooltipCssClass = '',
382+
currentStepObj,
383+
tooltipOffset,
384+
targetElementOffset;
385+
381386
//reset the old style
382387
tooltipLayer.style.top = null;
383388
tooltipLayer.style.right = null;
@@ -396,10 +401,8 @@
396401
//prevent error when `this._currentStep` is undefined
397402
if (!this._introItems[this._currentStep]) return;
398403

399-
var tooltipCssClass = '';
400-
401404
//if we have a custom css class for each step
402-
var currentStepObj = this._introItems[this._currentStep];
405+
currentStepObj = this._introItems[this._currentStep];
403406
if (typeof (currentStepObj.tooltipClass) === 'string') {
404407
tooltipCssClass = currentStepObj.tooltipClass;
405408
} else {
@@ -411,7 +414,7 @@
411414
//custom css class for tooltip boxes
412415
var tooltipCssClass = this._options.tooltipClass;
413416

414-
var currentTooltipPosition = this._introItems[this._currentStep].position;
417+
currentTooltipPosition = this._introItems[this._currentStep].position;
415418
switch (currentTooltipPosition) {
416419
case 'top':
417420
tooltipLayer.style.left = '15px';
@@ -423,7 +426,7 @@
423426
arrowLayer.className = 'introjs-arrow left';
424427
break;
425428
case 'left':
426-
if (this._options.showStepNumbers == true) {
429+
if (this._options.showStepNumbers == true) {
427430
tooltipLayer.style.top = '15px';
428431
}
429432
tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px';
@@ -433,7 +436,7 @@
433436
arrowLayer.style.display = 'none';
434437

435438
//we have to adjust the top and left of layer manually for intro items without element{
436-
var tooltipOffset = _getOffset(tooltipLayer);
439+
tooltipOffset = _getOffset(tooltipLayer);
437440

438441
tooltipLayer.style.left = '50%';
439442
tooltipLayer.style.top = '50%';
@@ -446,6 +449,21 @@
446449
}
447450

448451
break;
452+
case 'bottom-right-aligned':
453+
arrowLayer.className = 'introjs-arrow top-right';
454+
tooltipLayer.style.right = '0px';
455+
tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
456+
break;
457+
case 'bottom-middle-aligned':
458+
targetElementOffset = _getOffset(targetElement);
459+
tooltipOffset = _getOffset(tooltipLayer);
460+
461+
arrowLayer.className = 'introjs-arrow top-middle';
462+
tooltipLayer.style.left = (targetElementOffset.width/2 - tooltipOffset.width/2) + 'px';
463+
tooltipLayer.style.bottom = '-' + (tooltipOffset.height + 10) + 'px';
464+
break;
465+
case 'bottom-left-aligned':
466+
// Bottom-left-aligned is the same as the default bottom
449467
case 'bottom':
450468
// Bottom going to follow the default behavior
451469
default:
@@ -467,10 +485,10 @@
467485
//prevent error when `this._currentStep` in undefined
468486
if (!this._introItems[this._currentStep]) return;
469487

470-
var currentElement = this._introItems[this._currentStep];
471-
var elementPosition = _getOffset(currentElement.element);
488+
var currentElement = this._introItems[this._currentStep],
489+
elementPosition = _getOffset(currentElement.element),
490+
widthHeightPadding = 10;
472491

473-
var widthHeightPadding = 10;
474492
if (currentElement.position == 'floating') {
475493
widthHeightPadding = 0;
476494
}
@@ -712,14 +730,14 @@
712730
while (parentElm != null) {
713731
if (parentElm.tagName.toLowerCase() === 'body') break;
714732

715-
//fix The Stacking Contenxt problem.
733+
//fix The Stacking Contenxt problem.
716734
//More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
717735
var zIndex = _getPropValue(parentElm, 'z-index');
718736
var opacity = parseFloat(_getPropValue(parentElm, 'opacity'));
719737
if (/[0-9]+/.test(zIndex) || opacity < 1) {
720738
parentElm.className += ' introjs-fixParent';
721739
}
722-
740+
723741
parentElm = parentElm.parentNode;
724742
}
725743

@@ -738,7 +756,7 @@
738756
window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice
739757
}
740758
}
741-
759+
742760
if (typeof (this._introAfterChangeCallback) !== 'undefined') {
743761
this._introAfterChangeCallback.call(this, targetElement.element);
744762
}

‎introjs.css

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
line-height: 20px;
7373
border: 3px solid white;
7474
border-radius: 50%;
75-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
75+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
7676
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
7777
box-shadow: 0 2px 5px rgba(0,0,0,.4);
7878
}
@@ -89,6 +89,23 @@
8989
border-bottom-color:white;
9090
border-left-color:transparent;
9191
}
92+
.introjs-arrow.top-right {
93+
top: -10px;
94+
right: 10px;
95+
border-top-color:transparent;
96+
border-right-color:transparent;
97+
border-bottom-color:white;
98+
border-left-color:transparent;
99+
}
100+
.introjs-arrow.top-middle {
101+
top: -10px;
102+
left: 50%;
103+
margin-left: -5px;
104+
border-top-color:transparent;
105+
border-right-color:transparent;
106+
border-bottom-color:white;
107+
border-left-color:transparent;
108+
}
92109
.introjs-arrow.right {
93110
right: -10px;
94111
top: 10px;
@@ -132,8 +149,8 @@
132149
text-align: right;
133150
}
134151

135-
/*
136-
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
152+
/*
153+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
137154
Changed by Afshin Mehrabani
138155
*/
139156
.introjs-button {
@@ -170,7 +187,7 @@
170187

171188
.introjs-button:hover {
172189
border-color: #bcbcbc;
173-
text-decoration: none;
190+
text-decoration: none;
174191
box-shadow: 0px 1px 1px #e3e3e3;
175192
}
176193

@@ -252,4 +269,4 @@
252269
width: 0;
253270
left: 50%;
254271
top: 50%;
255-
}
272+
}

0 commit comments

Comments
 (0)