Skip to content

Commit e0ee73d

Browse files
authored
Merge pull request #106 from nd0ut/master
Workaround for fixed elements inside transformed elements
2 parents 027e43d + 8a7a2d2 commit e0ee73d

File tree

6 files changed

+130
-83
lines changed

6 files changed

+130
-83
lines changed

dist/react-tooltip.js

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,8 @@ var ReactTooltip = function (_Component) {
171171
value: function bindListener() {
172172
var targetArray = this.getTargetArray();
173173

174-
var dataEvent = undefined;
175-
var dataEventOff = undefined;
174+
var dataEvent = void 0;
175+
var dataEventOff = void 0;
176176
for (var i = 0; i < targetArray.length; i++) {
177177
if (targetArray[i].getAttribute('currentItem') === null) {
178178
targetArray[i].setAttribute('currentItem', 'false');
@@ -206,7 +206,7 @@ var ReactTooltip = function (_Component) {
206206
key: 'unbindListener',
207207
value: function unbindListener() {
208208
var targetArray = document.querySelectorAll('[data-tip]');
209-
var dataEvent = undefined;
209+
var dataEvent = void 0;
210210

211211
for (var i = 0; i < targetArray.length; i++) {
212212
dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
@@ -229,7 +229,7 @@ var ReactTooltip = function (_Component) {
229229
value: function getTargetArray() {
230230
var id = this.props.id;
231231

232-
var targetArray = undefined;
232+
var targetArray = void 0;
233233

234234
if (id === undefined) {
235235
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
@@ -278,7 +278,7 @@ var ReactTooltip = function (_Component) {
278278
value: function checkStatus(e) {
279279
var show = this.state.show;
280280

281-
var isCapture = undefined;
281+
var isCapture = void 0;
282282

283283
if (e.currentTarget.getAttribute('data-iscapture')) {
284284
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
@@ -329,7 +329,7 @@ var ReactTooltip = function (_Component) {
329329
/* Detect multiline */
330330
var regexp = /<br\s*\/?>/;
331331
var multiline = e.currentTarget.getAttribute('data-multiline') ? e.currentTarget.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
332-
var tooltipText = undefined;
332+
var tooltipText = void 0;
333333
var multilineCount = 0;
334334
if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
335335
tooltipText = originTooltip;
@@ -464,13 +464,29 @@ var ReactTooltip = function (_Component) {
464464
var targetHeight = currentTarget.clientHeight;
465465
var windoWidth = window.innerWidth;
466466
var windowHeight = window.innerHeight;
467-
var x = undefined;
468-
var y = undefined;
467+
var x = void 0;
468+
var y = void 0;
469469
var defaultTopY = targetTop - tipHeight - 8;
470470
var defaultBottomY = targetTop + targetHeight + 8;
471471
var defaultLeftX = targetLeft - tipWidth - 6;
472472
var defaultRightX = targetLeft + targetWidth + 6;
473473

474+
var parentTop = 0;
475+
var parentLeft = 0;
476+
var currentParent = currentTarget.parentElement;
477+
478+
while (currentParent) {
479+
if (currentParent.style.transform.length > 0) {
480+
break;
481+
}
482+
currentParent = currentParent.parentElement;
483+
}
484+
485+
if (currentParent) {
486+
parentTop = currentParent.getBoundingClientRect().top;
487+
parentLeft = currentParent.getBoundingClientRect().left;
488+
}
489+
474490
var outsideTop = function outsideTop() {
475491
return defaultTopY - 10 < 0;
476492
};
@@ -532,17 +548,17 @@ var ReactTooltip = function (_Component) {
532548
};
533549

534550
if (place === 'top') {
535-
x = targetLeft - tipWidth / 2 + targetWidth / 2;
536-
y = getTopPositionY();
551+
x = targetLeft - tipWidth / 2 + targetWidth / 2 - parentLeft;
552+
y = getTopPositionY() - parentTop;
537553
} else if (place === 'bottom') {
538-
x = targetLeft - tipWidth / 2 + targetWidth / 2;
539-
y = getBottomPositionY();
554+
x = targetLeft - tipWidth / 2 + targetWidth / 2 - parentLeft;
555+
y = getBottomPositionY() - parentTop;
540556
} else if (place === 'left') {
541-
x = getLeftPositionX();
542-
y = targetTop + targetHeight / 2 - tipHeight / 2;
557+
x = getLeftPositionX() - parentLeft;
558+
y = targetTop + targetHeight / 2 - tipHeight / 2 - parentTop;
543559
} else if (place === 'right') {
544-
x = getRightPositionX();
545-
y = targetTop + targetHeight / 2 - tipHeight / 2;
560+
x = getRightPositionX() - parentLeft;
561+
y = targetTop + targetHeight / 2 - tipHeight / 2 - parentTop;
546562
}
547563

548564
return { x: x, y: y };
@@ -737,8 +753,8 @@ var ReactTooltip = function (_Component) {
737753
}
738754
firstCount++;
739755
}
740-
for (var i = string.length - 1; i >= 0; i--) {
741-
if (string[i] !== ' ') {
756+
for (var _i = string.length - 1; _i >= 0; _i--) {
757+
if (string[_i] !== ' ') {
742758
break;
743759
}
744760
lastCount++;

0 commit comments

Comments
 (0)