Skip to content

Commit 9fc8850

Browse files
45kb45kb
authored
Merge pull request #206 from leonard-thieu/corner-positions
Add support for corner positions.
2 parents 5e7cc33 + 6120efd commit 9fc8850

File tree

4 files changed

+205
-106
lines changed

4 files changed

+205
-106
lines changed

‎Readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ Call the directive wherever you want in your html page
8181

8282
Option | Type | Default | Description
8383
------------- | ------------- | ------------- | -------------
84-
tooltip-side="" | String('left','right','top','bottom') | 'top' | Set your tooltip to show on `left` or `right` or `top` or `bottom` position
84+
tooltip-side="" | String('left','right','top','bottom','top left','top right','bottom left','bottom right') | 'top' | Set your tooltip to show on `left` or `right` or `top` or `bottom` or `top left` or `top right` or `bottom left` or `bottom right` position
8585
tooltip-template="" | String() | '' | Set your tooltip template (HTML or just Text)
8686
| | | **to know**: don't use it together with `tooltip-template-url` attribute, use only one of them
8787
tooltip-template-url="" | String() | '' | Set your external tooltip template PATH

‎index.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@
4040

4141
color: violet;
4242
}
43+
44+
.fa-rotate-45 {
45+
transform: rotate(45deg);
46+
}
4347
</style>
4448
<title>Angularjs Tooltips</title>
4549
</head>
@@ -94,6 +98,34 @@
9498
tooltip-template="I'm another tooltip!"></i>
9599
</div>
96100

101+
<div>
102+
<i class="fa fa-arrow-left fa-rotate-45"
103+
tooltips
104+
tooltip-side="top left"
105+
tooltip-template="I'm another tooltip!"></i>
106+
</div>
107+
108+
<div>
109+
<i class="fa fa-arrow-up fa-rotate-45"
110+
tooltips
111+
tooltip-side="top right"
112+
tooltip-template="I'm another tooltip!"></i>
113+
</div>
114+
115+
<div>
116+
<i class="fa fa-arrow-down fa-rotate-45"
117+
tooltips
118+
tooltip-side="bottom left"
119+
tooltip-template="I'm another tooltip!"></i>
120+
</div>
121+
122+
<div>
123+
<i class="fa fa-arrow-right fa-rotate-45"
124+
tooltips
125+
tooltip-side="bottom right"
126+
tooltip-template="I'm another tooltip!"></i>
127+
</div>
128+
97129
<div>
98130
<span tooltips
99131
tooltip-template="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.">
@@ -191,6 +223,42 @@
191223
</span>
192224
</div>
193225

226+
<div>
227+
<span tooltips
228+
tooltip-side="top left"
229+
tooltip-smart="true"
230+
tooltip-template="I'm a tooltip!">
231+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
232+
</span>
233+
</div>
234+
235+
<div>
236+
<span tooltips
237+
tooltip-side="top right"
238+
tooltip-smart="true"
239+
tooltip-template="I'm a tooltip!">
240+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
241+
</span>
242+
</div>
243+
244+
<div>
245+
<span tooltips
246+
tooltip-side="bottom left"
247+
tooltip-smart="true"
248+
tooltip-template="I'm a tooltip!">
249+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
250+
</span>
251+
</div>
252+
253+
<div>
254+
<span tooltips
255+
tooltip-side="bottom right"
256+
tooltip-smart="true"
257+
tooltip-template="I'm a tooltip!">
258+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
259+
</span>
260+
</div>
261+
194262
<div>
195263
<span tooltips
196264
tooltip-template="{{ demoCtrl.tooltipText }}">

‎lib/angular-tooltips.js

Lines changed: 39 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,31 @@
204204

205205
throw new Error('You must provide a position');
206206
}
207+
, getSideClasses = function getSideClasses(sides) {
208+
209+
return sides.split(' ').map(function mapSideClasses(side) {
210+
211+
return '_' + side;
212+
}).join(' ');
213+
}
214+
, directions = ['_top', '_top _left', '_left', '_bottom _left', '_bottom', '_bottom _right', '_right', '_top _right']
215+
, smartPosition = function smartPosition(tipElement, tooltipElement, startSide) {
216+
217+
var directionsIndex = directions.indexOf(getSideClasses(startSide))
218+
, directionsLength = directions.length
219+
, directionsCount = 0;
220+
221+
for (; directionsCount < directionsLength && isOutOfPage(tipElement); directionsCount += 1) {
222+
223+
directionsIndex += 1;
224+
if (directionsIndex >= directions.length) {
225+
226+
directionsIndex = 0;
227+
}
228+
tooltipElement.removeClass('_top _left _bottom _right');
229+
tooltipElement.addClass(directions[directionsIndex]);
230+
}
231+
}
207232
, tooltipConfigurationProvider = function tooltipConfigurationProvider() {
208233

209234
var tooltipConfiguration = {
@@ -260,7 +285,7 @@
260285
throw new Error('You can not have a controller without a template or templateUrl defined');
261286
}
262287

263-
var oldTooltipSide = '_' + tooltipsConf.side
288+
var oldTooltipSide = getSideClasses(tooltipsConf.side)
264289
, oldTooltipShowTrigger = tooltipsConf.showTrigger
265290
, oldTooltipHideTrigger = tooltipsConf.hideTrigger
266291
, oldTooltipClass
@@ -307,105 +332,19 @@
307332
if ($attrs.tooltipSmart) {
308333

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

411350
throw new Error('Position not supported');
@@ -642,9 +581,9 @@
642581

643582
if (oldTooltipSide) {
644583

645-
tooltipElement.removeAttr('_' + oldTooltipSide);
584+
tooltipElement.removeClass(oldTooltipSide);
646585
}
647-
tooltipElement.addClass('_' + newValue);
586+
tooltipElement.addClass(getSideClasses(newValue));
648587
oldTooltipSide = newValue;
649588
}
650589
}

0 commit comments

Comments
 (0)