Skip to content

Commit 4f3fff5

Browse files
author
Yaron Nachshon
committed
arrow position
1 parent 2a882fc commit 4f3fff5

File tree

3 files changed

+110
-61
lines changed

3 files changed

+110
-61
lines changed

‎intro.js

Lines changed: 65 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,15 @@
8484
return offset;
8585
}
8686

87-
function outerPositionElement(element, target, position){
87+
function outerPositionElement(element, target, position, offsetX, offsetY){
8888
var offset = convertOuterPositionToOffset(element, target, position);
89+
offset.left += offsetX;
90+
offset.top += offsetY;
8991
offset = fitOffsetToScreen(offset, element.outerWidth());
9092
return element.offset(offset);
9193
}
9294

9395

94-
95-
9696
function Hint(){
9797
var tooltip;
9898
var that = this;
@@ -105,10 +105,6 @@
105105
return tooltip.find('.intro-tooltip-arrow');
106106
}
107107

108-
function difference(a, b) {
109-
return Math.abs(a - b);
110-
}
111-
112108
function createTooltip(){
113109
var tooltip = $('<div><div class="intro-tooltip-content"></div><div class="intro-tooltip-arrow"></div></div>')
114110
.addClass('intro-tooltip');
@@ -119,13 +115,47 @@
119115

120116
function repositionTooltipArrow(){
121117
var tooltipArrowElement = getTooltipArrowElement();
122-
tooltipArrowElement.css({'left': 0});
123118
var elementBoundingClientRect = that.element.get(0).getBoundingClientRect();
124-
var tooltipBoundingClientRect = tooltip.get(0).getBoundingClientRect();
125-
var delta = difference(elementBoundingClientRect.left, tooltipBoundingClientRect.left);
126-
127-
tooltipArrowElement.css({left: delta});
128-
119+
var left;
120+
var top;
121+
122+
if(tooltipPosition === 'bottom'){
123+
left = elementBoundingClientRect.left + (elementBoundingClientRect.width / 2) - (tooltipArrowElement.outerWidth() / 2);
124+
top = -(tooltipArrowElement.outerHeight());
125+
tooltipArrowElement.offset({
126+
left: left
127+
});
128+
tooltipArrowElement.css({
129+
top: top
130+
});
131+
}else if(tooltipPosition === 'top'){
132+
left = elementBoundingClientRect.left + (elementBoundingClientRect.width / 2) - (tooltipArrowElement.outerWidth() / 2);
133+
top = '100%';
134+
tooltipArrowElement.offset({
135+
left: left
136+
});
137+
tooltipArrowElement.css({
138+
top: top
139+
});
140+
}else if(tooltipPosition === 'left'){
141+
left = '100%';
142+
top = elementBoundingClientRect.top + (elementBoundingClientRect.height / 2) - (tooltipArrowElement.outerHeight() / 2);
143+
tooltipArrowElement.css({
144+
left: left
145+
});
146+
tooltipArrowElement.offset({
147+
top: top
148+
});
149+
}else if(tooltipPosition === 'right'){
150+
left = -(tooltipArrowElement.outerWidth());
151+
top = elementBoundingClientRect.top + (elementBoundingClientRect.height / 2) - (tooltipArrowElement.outerHeight() / 2);
152+
tooltipArrowElement.css({
153+
left: left
154+
});
155+
tooltipArrowElement.offset({
156+
top: top
157+
});
158+
}
129159
}
130160

131161
function createHint(){
@@ -135,6 +165,22 @@
135165
return hint;
136166
}
137167

168+
function repositionTooltip(){
169+
var tooltipArrowElement = getTooltipArrowElement();
170+
var offsetX = 0, offsetY = 0;
171+
if(tooltipPosition === 'top'){
172+
offsetY = -(tooltipArrowElement.outerHeight());
173+
}else if(tooltipPosition === 'bottom'){
174+
offsetY = tooltipArrowElement.outerHeight();
175+
}else if(tooltipPosition === 'right'){
176+
offsetX = tooltipArrowElement.outerWidth();
177+
}else if(tooltipPosition === 'left'){
178+
offsetX = -(tooltipArrowElement.outerWidth());
179+
}
180+
outerPositionElement(tooltip, that.element, tooltipPosition, offsetX, offsetY);
181+
repositionTooltipArrow();
182+
}
183+
138184
this.element = null;
139185

140186
this.hideTooltip = function(){
@@ -169,8 +215,7 @@
169215
innerPositionElement(that.element, targetElement, hintPosition, duration).then(function(){
170216
getTooltipArrowElement().attr('position', tooltipPosition);
171217
tooltip.css('opacity', 0).show();
172-
outerPositionElement(tooltip, that.element, tooltipPosition);
173-
repositionTooltipArrow();
218+
repositionTooltip();
174219
tooltip.animate({'opacity': 1});
175220
defer.resolve();
176221
});
@@ -285,15 +330,17 @@
285330
showStep(base.currentStep);
286331
};
287332

288-
base.goToStep = function(step){
333+
base.goToStep = function(stepIndex) {
334+
currentStepIndex = stepIndex;
335+
showStep(base.currentStep);
289336
};
290337

291338
base.setOption = function(option, value){
292339
base.options[option] = value;
293340
};
294341

295-
base.start = function(){
296-
currentStepIndex = 0;
342+
base.start = function(stepIndex){
343+
currentStepIndex = stepIndex || 0;
297344
showStep(base.currentStep);
298345
};
299346

‎introjs.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎introjs.scss

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -50,17 +50,19 @@ $arrow-size: $arrow-size-border * 2;
5050

5151
/* intro */
5252
.intro-hint {
53+
$hint-size: 60px;
5354
position: absolute;
54-
width: 40px;
55-
height: 40px;
55+
width: $hint-size;
56+
height: $hint-size;
5657
z-index: 1100;
5758

59+
5860
> .intro-circle {
5961
background: #FF3B3B;
6062
box-shadow: 0 0 1px 13px #FF7B7B;
6163
border-radius: 10000px;
62-
width: 40px;
63-
height: 40px;
64+
width: $hint-size;
65+
height: $hint-size;
6466
pointer-events: none;
6567
}
6668

@@ -82,53 +84,53 @@ $arrow-size: $arrow-size-border * 2;
8284

8385
.intro-tooltip-arrow {
8486
&[position=right]{
85-
@include arrow('left', red, $arrow-size-border);
87+
@include arrow('left', blue, $arrow-size-border);
8688
}
8789
&[position=left]{
88-
@include arrow('right', red, $arrow-size-border);
90+
@include arrow('right', blue, $arrow-size-border);
8991
}
9092
&[position=bottom]{
91-
@include arrow('top', red, $arrow-size-border);
93+
@include arrow('top', blue, $arrow-size-border);
9294
}
9395
&[position=top]{
94-
@include arrow('bottom', red, $arrow-size-border);
96+
@include arrow('bottom', blue, $arrow-size-border);
9597
top: 0;
9698
}
9799
}
98-
99-
&.right {
100-
top: 50%;
101-
transform: translateY(-50%);
102-
left: calc(100% + 12px);
103-
104-
}
105-
106-
&.left {
107-
top: 50%;
108-
right: calc(100% + 13px );
109-
transform: translateY(-50%);
110-
.intro-tooltip-arrow {
111-
112-
}
113-
}
114-
115-
&.bottom {
116-
top: calc(100% + 13px);
117-
left: 50%;
118-
transform: translateX(-50%);
119-
.intro-tooltip-arrow {
120-
121-
}
122-
}
123-
124-
&.top {
125-
bottom: calc(100% + 13px);
126-
left: 50%;
127-
transform: translateX(-50%);
128-
.intro-tooltip-arrow {
129-
130-
}
131-
}
100+
//
101+
//&.right {
102+
// top: 50%;
103+
// transform: translateY(-50%);
104+
// left: calc(100% + 12px);
105+
//
106+
//}
107+
//
108+
//&.left {
109+
// top: 50%;
110+
// right: calc(100% + 13px );
111+
// transform: translateY(-50%);
112+
// .intro-tooltip-arrow {
113+
//
114+
// }
115+
//}
116+
//
117+
//&.bottom {
118+
// top: calc(100% + 13px);
119+
// left: 50%;
120+
// transform: translateX(-50%);
121+
// .intro-tooltip-arrow {
122+
//
123+
// }
124+
//}
125+
//
126+
//&.top {
127+
// bottom: calc(100% + 13px);
128+
// left: 50%;
129+
// transform: translateX(-50%);
130+
// .intro-tooltip-arrow {
131+
//
132+
// }
133+
//}
132134
}
133135
.intro-element {
134136
z-index: 1100 !important;

0 commit comments

Comments
 (0)