Permalink
Browse files

fix(tooltip+popover): Check if trigger element is in DOM during vsibi…

…lity check
  • Loading branch information...
tmorehouse committed Sep 1, 2017
1 parent fb67306 commit 55c4ff03a8994ddb273923d02f577935fb8d7480
Showing with 27 additions and 13 deletions.
  1. +27 −13 lib/classes/tooltip.js
@@ -82,7 +82,10 @@ function generateId(name) {
// Determine if an element is visible. Faster than CSS checks
function elVisible(el) {
return el && (el.offsetParent !== null || !(el.offsetWidth > 0 || el.offsetHeight > 0));
return el &&
document.body.contains(el) &&
el.offsetParent !== null &&
(el.offsetWidth > 0 || el.offsetHeight > 0);
}
// Determine if an element is disabled
@@ -175,8 +178,7 @@ class ToolTip {
// Destroy this instance
destroy() {
clearInterval(this.$visibleInterval);
this.$visibleInterval = null
this.visibleCheck(false);
clearTimeout(this.$hoverTimeout);
this.$hoverTimeout = null;
clearTimeout(this.$fadeTimeout);
@@ -293,28 +295,41 @@ class ToolTip {
// Periodically check to make sure $element is visible
// For handling when tip is in <keepalive>, tabs, carousel, etc
this.$visibleInterval = setInterval(() => {
if (this.$tip && !elVisible(this.$element) && this.$tip.classList.contains(ClassName.SHOW)) {
// Element is no longer visible, so force-hide the tooltip
this.forceHide();
}
}, 1000);
this.visibleCheck(true);
// Start the transition/animation
this.transitionOnce(tip, complete);
}
// handler for periodic visibility check
visibleCheck(on) {
clearInterval(this.$visibleInterval);
this.$visibleInterval = null;
if (on) {
this.$visibleInterval = setInterval(() => {
const tip = this.getTipElement();
if (tip && !elVisible(this.$element) && tip.classList.contains(ClassName.SHOW)) {
// Element is no longer visible, so force-hide the tooltip
this.forceHide();
}
}, 100);
}
}
// force hide of tip (internal method)
forceHide() {
const tip = this.getTipElement();
// Remove animation for quicker hide
this.$tip.classList.remove(ClassName.FADE);
// Clear any hover enter/leave event
clearTimeout(this.$hoverTimeout);
this.$hoverTimeout = null;
this.$hoverState = '';
// Remove animation for quicker hide
const initAnimation = this.$config.animation;
this.$config.animation = false;
tip.classList.remove(ClassName.FADE);
// Hide the tip
this.hide(null, true);
this.$config.animation = initAnimation;
}
// Hide tooltip
@@ -335,8 +350,7 @@ class ToolTip {
}
// Stop checking for visibility of element.
clearInterval(this.$visibleInterval);
this.$visibleInterval = null;
this.visibleCheck(false);
// Transitionend Callback
const complete = () => {

0 comments on commit 55c4ff0

Please sign in to comment.