Skip to content

Commit 2e57ad7

Browse files
45kb45kb
committed
now you can position tooltip also on top-left, top-right,bottom-left,bottom-right thanks to @leonard-thieu 
1 parent 9fc8850 commit 2e57ad7

8 files changed

+125
-122
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-tooltips",
3-
"version": "1.1.12",
3+
"version": "1.2.0",
44
"description": "Angular.js tooltips module.",
55
"authors": [
66
"Filippo Oretti <filippo.oretti@gmail.com",

‎dist/angular-tooltips.css

+74-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/*
22
* angular-tooltips
3-
* 1.1.12
3+
* 1.2.0
44
*
55
* Angular.js tooltips module.
66
* http://720kb.github.io/angular-tooltips
77
*
88
* MIT license
9-
* Sat May 20 2017
9+
* Sun May 21 2017
1010
*/
1111
@-webkit-keyframes animate-tooltip {
1212
0% {
@@ -100,12 +100,12 @@ tooltip {
100100
font-size: 1.1em; }
101101
tooltip tip-tip._small {
102102
font-size: 0.8em; }
103-
tooltip._top tip {
103+
tooltip._top:not(._left):not(._right) tip {
104104
left: 50%;
105105
top: -9px;
106106
-webkit-transform: translateX(-50%) translateY(-100%);
107107
transform: translateX(-50%) translateY(-100%); }
108-
tooltip._top tip tip-arrow {
108+
tooltip._top:not(._left):not(._right) tip tip-arrow {
109109
border-left: 6px solid transparent;
110110
border-right: 6px solid transparent;
111111
border-top: 6px solid rgba(0, 0, 0, 0.85);
@@ -116,12 +116,12 @@ tooltip {
116116
position: absolute;
117117
top: 100%;
118118
width: 0; }
119-
tooltip._bottom tip {
119+
tooltip._bottom:not(._left):not(._right) tip {
120120
right: 50%;
121121
top: 100%;
122122
-webkit-transform: translateX(50%) translateY(9px);
123123
transform: translateX(50%) translateY(9px); }
124-
tooltip._bottom tip tip-arrow {
124+
tooltip._bottom:not(._left):not(._right) tip tip-arrow {
125125
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
126126
border-left: 6px solid transparent;
127127
border-right: 6px solid transparent;
@@ -132,12 +132,12 @@ tooltip {
132132
margin-left: -6px;
133133
position: absolute;
134134
width: 0; }
135-
tooltip._right tip {
135+
tooltip._right:not(._top):not(._bottom) tip {
136136
left: 100%;
137137
top: 50%;
138138
-webkit-transform: translateX(9px) translateY(-50%);
139139
transform: translateX(9px) translateY(-50%); }
140-
tooltip._right tip tip-arrow {
140+
tooltip._right:not(._top):not(._bottom) tip tip-arrow {
141141
border-bottom: 6px solid transparent;
142142
border-right: 6px solid rgba(0, 0, 0, 0.85);
143143
border-top: 6px solid transparent;
@@ -148,12 +148,12 @@ tooltip {
148148
right: 100%;
149149
top: 50%;
150150
width: 0; }
151-
tooltip._left tip {
151+
tooltip._left:not(._top):not(._bottom) tip {
152152
left: -9px;
153153
top: 50%;
154154
-webkit-transform: translateX(-100%) translateY(-50%);
155155
transform: translateX(-100%) translateY(-50%); }
156-
tooltip._left tip tip-arrow {
156+
tooltip._left:not(._top):not(._bottom) tip tip-arrow {
157157
border-bottom: 6px solid transparent;
158158
border-left: 6px solid rgba(0, 0, 0, 0.85);
159159
border-top: 6px solid transparent;
@@ -164,6 +164,70 @@ tooltip {
164164
position: absolute;
165165
top: 50%;
166166
width: 0; }
167+
tooltip._top._left tip {
168+
left: -9px;
169+
top: -9px;
170+
-webkit-transform: translateX(-100%) translateY(-100%);
171+
transform: translateX(-100%) translateY(-100%); }
172+
tooltip._top._left tip tip-arrow {
173+
border-left: 6px solid transparent;
174+
border-right: 6px solid transparent;
175+
border-top: 6px solid rgba(0, 0, 0, 0.85);
176+
content: '';
177+
height: 0;
178+
left: 90%;
179+
margin-left: -6px;
180+
position: absolute;
181+
top: 100%;
182+
width: 0; }
183+
tooltip._top._right tip {
184+
left: 100%;
185+
top: -9px;
186+
-webkit-transform: translateX(9px) translateY(-100%);
187+
transform: translateX(9px) translateY(-100%); }
188+
tooltip._top._right tip tip-arrow {
189+
border-left: 6px solid transparent;
190+
border-right: 6px solid transparent;
191+
border-top: 6px solid rgba(0, 0, 0, 0.85);
192+
content: '';
193+
height: 0;
194+
left: 10%;
195+
margin-left: -6px;
196+
position: absolute;
197+
top: 100%;
198+
width: 0; }
199+
tooltip._bottom._left tip {
200+
left: -9px;
201+
top: 100%;
202+
-webkit-transform: translateX(-100%) translateY(9px);
203+
transform: translateX(-100%) translateY(9px); }
204+
tooltip._bottom._left tip tip-arrow {
205+
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
206+
border-left: 6px solid transparent;
207+
border-right: 6px solid transparent;
208+
bottom: 100%;
209+
content: '';
210+
height: 0;
211+
left: 90%;
212+
margin-left: -6px;
213+
position: absolute;
214+
width: 0; }
215+
tooltip._bottom._right tip {
216+
left: 100%;
217+
top: 100%;
218+
-webkit-transform: translateX(9px) translateY(9px);
219+
transform: translateX(9px) translateY(9px); }
220+
tooltip._bottom._right tip tip-arrow {
221+
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
222+
border-left: 6px solid transparent;
223+
border-right: 6px solid transparent;
224+
bottom: 100%;
225+
content: '';
226+
height: 0;
227+
left: 10%;
228+
margin-left: -6px;
229+
position: absolute;
230+
width: 0; }
167231

168232
tip-tip .close-button {
169233
cursor: pointer;

‎dist/angular-tooltips.js

+41-102
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/*
22
* angular-tooltips
3-
* 1.1.12
3+
* 1.2.0
44
*
55
* Angular.js tooltips module.
66
* http://720kb.github.io/angular-tooltips
77
*
88
* MIT license
9-
* Sat May 20 2017
9+
* Sun May 21 2017
1010
*/
1111
/*global angular,window*/
1212
(function withAngular(angular, window) {
@@ -214,6 +214,31 @@
214214

215215
throw new Error('You must provide a position');
216216
}
217+
, getSideClasses = function getSideClasses(sides) {
218+
219+
return sides.split(' ').map(function mapSideClasses(side) {
220+
221+
return '_' + side;
222+
}).join(' ');
223+
}
224+
, directions = ['_top', '_top _left', '_left', '_bottom _left', '_bottom', '_bottom _right', '_right', '_top _right']
225+
, smartPosition = function smartPosition(tipElement, tooltipElement, startSide) {
226+
227+
var directionsIndex = directions.indexOf(getSideClasses(startSide))
228+
, directionsLength = directions.length
229+
, directionsCount = 0;
230+
231+
for (; directionsCount < directionsLength && isOutOfPage(tipElement); directionsCount += 1) {
232+
233+
directionsIndex += 1;
234+
if (directionsIndex >= directions.length) {
235+
236+
directionsIndex = 0;
237+
}
238+
tooltipElement.removeClass('_top _left _bottom _right');
239+
tooltipElement.addClass(directions[directionsIndex]);
240+
}
241+
}
217242
, tooltipConfigurationProvider = function tooltipConfigurationProvider() {
218243

219244
var tooltipConfiguration = {
@@ -270,7 +295,7 @@
270295
throw new Error('You can not have a controller without a template or templateUrl defined');
271296
}
272297

273-
var oldTooltipSide = '_' + tooltipsConf.side
298+
var oldTooltipSide = getSideClasses(tooltipsConf.side)
274299
, oldTooltipShowTrigger = tooltipsConf.showTrigger
275300
, oldTooltipHideTrigger = tooltipsConf.hideTrigger
276301
, oldTooltipClass
@@ -317,105 +342,19 @@
317342
if ($attrs.tooltipSmart) {
318343

319344
switch ($attrs.tooltipSide) {
320-
case 'top': {
321-
322-
if (isOutOfPage(tipElement)) {
323-
324-
tooltipElement.removeClass('_top');
325-
tooltipElement.addClass('_left');
326-
if (isOutOfPage(tipElement)) {
327-
328-
tooltipElement.removeClass('_left');
329-
tooltipElement.addClass('_bottom');
330-
if (isOutOfPage(tipElement)) {
331-
332-
tooltipElement.removeClass('_bottom');
333-
tooltipElement.addClass('_right');
334-
if (isOutOfPage(tipElement)) {
335-
336-
tooltipElement.removeClass('_right');
337-
tooltipElement.addClass('_top');
338-
}
339-
}
340-
}
341-
}
342-
break;
343-
}
344-
345-
case 'left': {
346-
347-
if (isOutOfPage(tipElement)) {
348-
349-
tooltipElement.removeClass('_left');
350-
tooltipElement.addClass('_bottom');
351-
if (isOutOfPage(tipElement)) {
352-
353-
tooltipElement.removeClass('_bottom');
354-
tooltipElement.addClass('_right');
355-
if (isOutOfPage(tipElement)) {
356-
357-
tooltipElement.removeClass('_right');
358-
tooltipElement.addClass('_top');
359-
if (isOutOfPage(tipElement)) {
360-
361-
tooltipElement.removeClass('_top');
362-
tooltipElement.addClass('_left');
363-
}
364-
}
365-
}
366-
}
367-
break;
368-
}
369-
370-
case 'bottom': {
371-
372-
if (isOutOfPage(tipElement)) {
373-
374-
tooltipElement.removeClass('_bottom');
375-
tooltipElement.addClass('_left');
376-
if (isOutOfPage(tipElement)) {
377-
378-
tooltipElement.removeClass('_left');
379-
tooltipElement.addClass('_top');
380-
if (isOutOfPage(tipElement)) {
381-
382-
tooltipElement.removeClass('_top');
383-
tooltipElement.addClass('_right');
384-
if (isOutOfPage(tipElement)) {
385-
386-
tooltipElement.removeClass('_right');
387-
tooltipElement.addClass('_bottom');
388-
}
389-
}
390-
}
391-
}
392-
break;
393-
}
394-
395-
case 'right': {
396-
397-
if (isOutOfPage(tipElement)) {
398-
399-
tooltipElement.removeClass('_right');
400-
tooltipElement.addClass('_top');
401-
if (isOutOfPage(tipElement)) {
402-
403-
tooltipElement.removeClass('_top');
404-
tooltipElement.addClass('_left');
405-
if (isOutOfPage(tipElement)) {
406-
407-
tooltipElement.removeClass('_left');
408-
tooltipElement.addClass('_bottom');
409-
if (isOutOfPage(tipElement)) {
410-
411-
tooltipElement.removeClass('_bottom');
412-
tooltipElement.addClass('_right');
413-
}
414-
}
415-
}
416-
}
345+
case 'top':
346+
case 'left':
347+
case 'bottom':
348+
case 'right':
349+
case 'top left':
350+
case 'top right':
351+
case 'bottom left':
352+
case 'bottom right': {
353+
354+
smartPosition(tipElement, tooltipElement, $attrs.tooltipSide);
417355
break;
418356
}
357+
419358
default: {
420359

421360
throw new Error('Position not supported');
@@ -652,9 +591,9 @@
652591

653592
if (oldTooltipSide) {
654593

655-
tooltipElement.removeAttr('_' + oldTooltipSide);
594+
tooltipElement.removeClass(oldTooltipSide);
656595
}
657-
tooltipElement.addClass('_' + newValue);
596+
tooltipElement.addClass(getSideClasses(newValue));
658597
oldTooltipSide = newValue;
659598
}
660599
}

0 commit comments

Comments
 (0)