Skip to content

Commit e7e05dd

Browse files
wouldgowouldgo
committed
appendOnBody attribute
1 parent 932ad94 commit e7e05dd

File tree

3 files changed

+196
-33
lines changed

3 files changed

+196
-33
lines changed

‎dist/angular-tooltips.js‎

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
return anElement.currentStyle;
137137
}
138138
}
139-
, removeAppendedTip = function removeAppendedTip(theTooltipElement) {
139+
, getAppendedTip = function getAppendedTip(theTooltipElement) {
140140
var tipsInBody = window.document.querySelectorAll('._exradicated-tooltip')
141141
, aTipInBody
142142
, tipsInBodyIndex = 0
@@ -152,11 +152,19 @@
152152
if (angularizedElement.data('_tooltip-parent') &&
153153
angularizedElement.data('_tooltip-parent') === theTooltipElement) {
154154

155-
angularizedElement.remove();
155+
return angularizedElement;
156156
}
157157
}
158158
}
159159
}
160+
, removeAppendedTip = function removeAppendedTip(theTooltipElement) {
161+
var tipElement = getAppendedTip(theTooltipElement);
162+
163+
if (tipElement) {
164+
165+
tipElement.remove();
166+
}
167+
}
160168
, isOutOfPage = function isOutOfPage(theTipElement) {
161169

162170
if (theTipElement) {
@@ -254,6 +262,7 @@
254262
$attrs.tooltipCloseButton = $attrs.tooltipCloseButton || tooltipsConf.closeButton.toString();
255263
$attrs.tooltipSize = $attrs.tooltipSize || tooltipsConf.size;
256264
$attrs.tooltipSpeed = $attrs.tooltipSpeed || tooltipsConf.speed;
265+
$attrs.tooltipAppendToBody = $attrs.tooltipAppendToBody === 'true';
257266

258267
$transcludeFunc($scope, function onTransclusionDone(element, scope) {
259268
var attributes = getAttributesToAdd(element)
@@ -405,7 +414,11 @@
405414
, aStyleKey
406415
, tipTipCssToSet = {}
407416
, tipCssToSet = {}
408-
, tipArrowCssToSet = {};
417+
, tipArrowCssToSet = {}
418+
, paddingTopValue
419+
, paddingBottomValue
420+
, paddingLeftValue
421+
, paddingRightValue;
409422

410423
tipElement.removeClass('_hidden');
411424
exradicatedTipElement.removeClass('_hidden');
@@ -451,22 +464,22 @@
451464
tipCssToSet[aStyleKey] = tipElementStyle.getPropertyValue(aStyleKey);
452465
}
453466
}
467+
paddingTopValue = window.parseInt(tipElementStyle.getPropertyValue('padding-top'), 10);
468+
paddingBottomValue = window.parseInt(tipElementStyle.getPropertyValue('padding-bottom'), 10);
469+
paddingLeftValue = window.parseInt(tipElementStyle.getPropertyValue('padding-left'), 10);
470+
paddingRightValue = window.parseInt(tipElementStyle.getPropertyValue('padding-right'), 10);
454471

455-
tipCssToSet.top = tipElementBoundingClientRect.top + 'px';
456-
tipCssToSet.left = tipElementBoundingClientRect.left + 'px';
457-
tipCssToSet.height = tipElementBoundingClientRect.height - (
458-
window.parseInt(tipElementStyle.getPropertyValue('padding-top'), 10) +
459-
window.parseInt(tipElementStyle.getPropertyValue('padding-bottom'), 10)) + 'px';
460-
tipCssToSet.width = tipElementBoundingClientRect.width - (
461-
window.parseInt(tipElementStyle.getPropertyValue('padding-left'), 10) +
462-
window.parseInt(tipElementStyle.getPropertyValue('padding-right'), 10)) + 'px';
472+
tipCssToSet.top = tipElementBoundingClientRect.top + window.scrollY + 'px';
473+
tipCssToSet.left = tipElementBoundingClientRect.left + window.scrollX + 'px';
474+
tipCssToSet.height = tipElementBoundingClientRect.height - (paddingTopValue + paddingBottomValue) + 'px';
475+
tipCssToSet.width = tipElementBoundingClientRect.width - (paddingLeftValue + paddingRightValue) + 'px';
463476

464477
exradicatedTipElement.css(tipCssToSet);
465478

466479
exradicatedTipElement.children().css(tipTipCssToSet);
467480
exradicatedTipElement.children().next().css(tipArrowCssToSet);
468-
469-
if (event) {
481+
if (event &&
482+
$attrs.tooltipHidden !== 'true') {
470483

471484
exradicatedTipElement.addClass('_exradicated-tooltip');
472485
angular.element(window.document.body).append(exradicatedTipElement);
@@ -485,12 +498,54 @@
485498

486499
if ($attrs.tooltipAppendToBody) {
487500

488-
//removeAppendedTip(tooltipElement);
501+
removeAppendedTip(tooltipElement);
489502
} else {
490503

491504
tooltipElement.removeClass('active');
492505
}
493506
}
507+
, registerOnScrollFrom = function registerOnScrollFrom(theElement) {
508+
var parentElement = theElement.parent()
509+
, timer;
510+
511+
if (theElement[0] &&
512+
(theElement[0].scrollHeight > theElement[0].clientHeight ||
513+
theElement[0].scrollWidth > theElement[0].clientWidth)) {
514+
515+
theElement.on('scroll', function onScroll() {
516+
var that = this;
517+
518+
if (timer) {
519+
520+
$timeout.cancel(timer);
521+
}
522+
523+
timer = $timeout(function doLater() {
524+
525+
var theTipElement = getAppendedTip(tooltipElement)
526+
, tooltipBoundingRect = tooltipElement[0].getBoundingClientRect()
527+
, thatBoundingRect = that.getBoundingClientRect();
528+
529+
if (tooltipBoundingRect.top < thatBoundingRect.top ||
530+
tooltipBoundingRect.bottom > thatBoundingRect.bottom ||
531+
tooltipBoundingRect.left < thatBoundingRect.left ||
532+
tooltipBoundingRect.right > thatBoundingRect.right) {
533+
534+
removeAppendedTip(tooltipElement);
535+
} else if (theTipElement) {
536+
537+
onTooltipShow(true);
538+
}
539+
});
540+
});
541+
}
542+
543+
if (parentElement &&
544+
parentElement.length) {
545+
546+
registerOnScrollFrom(parentElement);
547+
}
548+
}
494549
, onTooltipTemplateChange = function onTooltipTemplateChange(newValue) {
495550

496551
if (newValue) {
@@ -677,6 +732,15 @@
677732
tooltipElement.append(tipElement);
678733
$element.after(tooltipElement);
679734

735+
if ($attrs.tooltipAppendToBody) {
736+
737+
resizeObserver.add(function onResize() {
738+
739+
registerOnScrollFrom(tooltipElement);
740+
});
741+
registerOnScrollFrom(tooltipElement);
742+
}
743+
680744
resizeObserver.add(function registerResize() {
681745

682746
calculateIfMultiLine();

‎index.html‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,39 @@
55
<link rel="stylesheet" type="text/css" href="dist/angular-tooltips.css">
66
<style media="screen">
77
body {
8+
89
margin: 100px;
910
}
10-
.scroll-area{
11-
max-height:100px;
12-
overflow:hidden;
13-
overflow-y:scroll;
14-
background:grey;
11+
12+
.scroll-area {
13+
14+
max-height: 90px;
15+
overflow: hidden;
16+
overflow-y: scroll;
17+
background: grey;
18+
}
19+
20+
.scroll-area-horizontal {
21+
padding: 10px;
22+
max-width: 90px;
23+
overflow: hidden;
24+
overflow-x: scroll;
25+
background: grey;
26+
display: flex;
1527
}
28+
1629
#demo-container > div {
30+
1731
margin: 10% 0;
1832
}
1933

2034
.a-class {
35+
2136
font-size: 2em;
2237
}
2338

2439
.another-class {
40+
2541
color: violet;
2642
}
2743
</style>
@@ -275,6 +291,7 @@
275291
Tooltip
276292
</span>
277293
</div>
294+
278295
<div class="scroll-area">
279296
<p>
280297
<button tooltips
@@ -301,6 +318,24 @@
301318
</p>
302319
</div>
303320

321+
<div class="scroll-area-horizontal">
322+
<button tooltips
323+
tooltip-append-to-body="true"
324+
tooltip-template="A tooltip with text">Tooltip Top</button>
325+
<button tooltips
326+
tooltip-side="left"
327+
tooltip-append-to-body="true"
328+
tooltip-template="A tooltip with text">Tooltip Left</button>
329+
<button tooltips
330+
tooltip-side="right"
331+
tooltip-append-to-body="true"
332+
tooltip-template="A tooltip with text">Tooltip Right</button>
333+
<button tooltips
334+
tooltip-side="bottom"
335+
tooltip-append-to-body="true"
336+
tooltip-template="A tooltip with text">Tooltip Bottom</button>
337+
</div>
338+
304339
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
305340
<script type="text/javascript" src="dist/angular-tooltips.js"></script>
306341
<script type="text/javascript" src="demo/js/index.js"></script>

‎lib/angular-tooltips.js‎

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
return anElement.currentStyle;
127127
}
128128
}
129-
, removeAppendedTip = function removeAppendedTip(theTooltipElement) {
129+
, getAppendedTip = function getAppendedTip(theTooltipElement) {
130130
var tipsInBody = window.document.querySelectorAll('._exradicated-tooltip')
131131
, aTipInBody
132132
, tipsInBodyIndex = 0
@@ -142,11 +142,19 @@
142142
if (angularizedElement.data('_tooltip-parent') &&
143143
angularizedElement.data('_tooltip-parent') === theTooltipElement) {
144144

145-
angularizedElement.remove();
145+
return angularizedElement;
146146
}
147147
}
148148
}
149149
}
150+
, removeAppendedTip = function removeAppendedTip(theTooltipElement) {
151+
var tipElement = getAppendedTip(theTooltipElement);
152+
153+
if (tipElement) {
154+
155+
tipElement.remove();
156+
}
157+
}
150158
, isOutOfPage = function isOutOfPage(theTipElement) {
151159

152160
if (theTipElement) {
@@ -244,6 +252,7 @@
244252
$attrs.tooltipCloseButton = $attrs.tooltipCloseButton || tooltipsConf.closeButton.toString();
245253
$attrs.tooltipSize = $attrs.tooltipSize || tooltipsConf.size;
246254
$attrs.tooltipSpeed = $attrs.tooltipSpeed || tooltipsConf.speed;
255+
$attrs.tooltipAppendToBody = $attrs.tooltipAppendToBody === 'true';
247256

248257
$transcludeFunc($scope, function onTransclusionDone(element, scope) {
249258
var attributes = getAttributesToAdd(element)
@@ -395,7 +404,11 @@
395404
, aStyleKey
396405
, tipTipCssToSet = {}
397406
, tipCssToSet = {}
398-
, tipArrowCssToSet = {};
407+
, tipArrowCssToSet = {}
408+
, paddingTopValue
409+
, paddingBottomValue
410+
, paddingLeftValue
411+
, paddingRightValue;
399412

400413
tipElement.removeClass('_hidden');
401414
exradicatedTipElement.removeClass('_hidden');
@@ -441,22 +454,22 @@
441454
tipCssToSet[aStyleKey] = tipElementStyle.getPropertyValue(aStyleKey);
442455
}
443456
}
457+
paddingTopValue = window.parseInt(tipElementStyle.getPropertyValue('padding-top'), 10);
458+
paddingBottomValue = window.parseInt(tipElementStyle.getPropertyValue('padding-bottom'), 10);
459+
paddingLeftValue = window.parseInt(tipElementStyle.getPropertyValue('padding-left'), 10);
460+
paddingRightValue = window.parseInt(tipElementStyle.getPropertyValue('padding-right'), 10);
444461

445-
tipCssToSet.top = tipElementBoundingClientRect.top + 'px';
446-
tipCssToSet.left = tipElementBoundingClientRect.left + 'px';
447-
tipCssToSet.height = tipElementBoundingClientRect.height - (
448-
window.parseInt(tipElementStyle.getPropertyValue('padding-top'), 10) +
449-
window.parseInt(tipElementStyle.getPropertyValue('padding-bottom'), 10)) + 'px';
450-
tipCssToSet.width = tipElementBoundingClientRect.width - (
451-
window.parseInt(tipElementStyle.getPropertyValue('padding-left'), 10) +
452-
window.parseInt(tipElementStyle.getPropertyValue('padding-right'), 10)) + 'px';
462+
tipCssToSet.top = tipElementBoundingClientRect.top + window.scrollY + 'px';
463+
tipCssToSet.left = tipElementBoundingClientRect.left + window.scrollX + 'px';
464+
tipCssToSet.height = tipElementBoundingClientRect.height - (paddingTopValue + paddingBottomValue) + 'px';
465+
tipCssToSet.width = tipElementBoundingClientRect.width - (paddingLeftValue + paddingRightValue) + 'px';
453466

454467
exradicatedTipElement.css(tipCssToSet);
455468

456469
exradicatedTipElement.children().css(tipTipCssToSet);
457470
exradicatedTipElement.children().next().css(tipArrowCssToSet);
458-
459-
if (event) {
471+
if (event &&
472+
$attrs.tooltipHidden !== 'true') {
460473

461474
exradicatedTipElement.addClass('_exradicated-tooltip');
462475
angular.element(window.document.body).append(exradicatedTipElement);
@@ -475,12 +488,54 @@
475488

476489
if ($attrs.tooltipAppendToBody) {
477490

478-
//removeAppendedTip(tooltipElement);
491+
removeAppendedTip(tooltipElement);
479492
} else {
480493

481494
tooltipElement.removeClass('active');
482495
}
483496
}
497+
, registerOnScrollFrom = function registerOnScrollFrom(theElement) {
498+
var parentElement = theElement.parent()
499+
, timer;
500+
501+
if (theElement[0] &&
502+
(theElement[0].scrollHeight > theElement[0].clientHeight ||
503+
theElement[0].scrollWidth > theElement[0].clientWidth)) {
504+
505+
theElement.on('scroll', function onScroll() {
506+
var that = this;
507+
508+
if (timer) {
509+
510+
$timeout.cancel(timer);
511+
}
512+
513+
timer = $timeout(function doLater() {
514+
515+
var theTipElement = getAppendedTip(tooltipElement)
516+
, tooltipBoundingRect = tooltipElement[0].getBoundingClientRect()
517+
, thatBoundingRect = that.getBoundingClientRect();
518+
519+
if (tooltipBoundingRect.top < thatBoundingRect.top ||
520+
tooltipBoundingRect.bottom > thatBoundingRect.bottom ||
521+
tooltipBoundingRect.left < thatBoundingRect.left ||
522+
tooltipBoundingRect.right > thatBoundingRect.right) {
523+
524+
removeAppendedTip(tooltipElement);
525+
} else if (theTipElement) {
526+
527+
onTooltipShow(true);
528+
}
529+
});
530+
});
531+
}
532+
533+
if (parentElement &&
534+
parentElement.length) {
535+
536+
registerOnScrollFrom(parentElement);
537+
}
538+
}
484539
, onTooltipTemplateChange = function onTooltipTemplateChange(newValue) {
485540

486541
if (newValue) {
@@ -667,6 +722,15 @@
667722
tooltipElement.append(tipElement);
668723
$element.after(tooltipElement);
669724

725+
if ($attrs.tooltipAppendToBody) {
726+
727+
resizeObserver.add(function onResize() {
728+
729+
registerOnScrollFrom(tooltipElement);
730+
});
731+
registerOnScrollFrom(tooltipElement);
732+
}
733+
670734
resizeObserver.add(function registerResize() {
671735

672736
calculateIfMultiLine();

0 commit comments

Comments
 (0)