vue-tippy 6.0.0-alpha.37 → 6.0.0-alpha.40

package/dist/vue-tippy.iife.js

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.37
+  * vue-tippy v6.0.0-alpha.40
   * (c) 2021 
   * @license MIT
   */
@@ -162,17 +162,42 @@ var VueTippy = (function (exports, vue) {
     return placement.split('-')[0];
   }
 
-  function getBoundingClientRect(element) {
+  var max = Math.max;
+  var min = Math.min;
+  var round = Math.round;
+
+  function getBoundingClientRect(element, includeScale) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+
     var rect = element.getBoundingClientRect();
+    var scaleX = 1;
+    var scaleY = 1;
+
+    if (isHTMLElement(element) && includeScale) {
+      var offsetHeight = element.offsetHeight;
+      var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+      // Fallback to 1 in case both values are `0`
+
+      if (offsetWidth > 0) {
+        scaleX = round(rect.width) / offsetWidth || 1;
+      }
+
+      if (offsetHeight > 0) {
+        scaleY = round(rect.height) / offsetHeight || 1;
+      }
+    }
+
     return {
-      width: rect.width,
-      height: rect.height,
-      top: rect.top,
-      right: rect.right,
-      bottom: rect.bottom,
-      left: rect.left,
-      x: rect.left,
-      y: rect.top
+      width: rect.width / scaleX,
+      height: rect.height / scaleY,
+      top: rect.top / scaleY,
+      right: rect.right / scaleX,
+      bottom: rect.bottom / scaleY,
+      left: rect.left / scaleX,
+      x: rect.left / scaleX,
+      y: rect.top / scaleY
     };
   }
 
@@ -317,13 +342,13 @@ var VueTippy = (function (exports, vue) {
     return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
   }
 
-  var max = Math.max;
-  var min = Math.min;
-  var round = Math.round;
-
   function within(min$1, value, max$1) {
     return max(min$1, min(value, max$1));
   }
+  function withinMaxClamp(min, value, max) {
+    var v = within(min, value, max);
+    return v > max ? max : v;
+  }
 
   function getFreshSideObject() {
     return {
@@ -436,6 +461,10 @@ var VueTippy = (function (exports, vue) {
     requiresIfExists: ['preventOverflow']
   };
 
+  function getVariation(placement) {
+    return placement.split('-')[1];
+  }
+
   var unsetSides = {
     top: 'auto',
     right: 'auto',
@@ -451,8 +480,8 @@ var VueTippy = (function (exports, vue) {
     var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
-      x: round(round(x * dpr) / dpr) || 0,
-      y: round(round(y * dpr) / dpr) || 0
+      x: round(x * dpr) / dpr || 0,
+      y: round(y * dpr) / dpr || 0
     };
   }
 
@@ -462,11 +491,13 @@ var VueTippy = (function (exports, vue) {
     var popper = _ref2.popper,
         popperRect = _ref2.popperRect,
         placement = _ref2.placement,
+        variation = _ref2.variation,
         offsets = _ref2.offsets,
         position = _ref2.position,
         gpuAcceleration = _ref2.gpuAcceleration,
         adaptive = _ref2.adaptive,
-        roundOffsets = _ref2.roundOffsets;
+        roundOffsets = _ref2.roundOffsets,
+        isFixed = _ref2.isFixed;
 
     var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
         _ref3$x = _ref3.x,
@@ -488,7 +519,7 @@ var VueTippy = (function (exports, vue) {
       if (offsetParent === getWindow(popper)) {
         offsetParent = getDocumentElement(popper);
 
-        if (getComputedStyle(offsetParent).position !== 'static') {
+        if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
           heightProp = 'scrollHeight';
           widthProp = 'scrollWidth';
         }
@@ -497,17 +528,19 @@ var VueTippy = (function (exports, vue) {
 
       offsetParent = offsetParent;
 
-      if (placement === top) {
-        sideY = bottom; // $FlowFixMe[prop-missing]
-
-        y -= offsetParent[heightProp] - popperRect.height;
+      if (placement === top || (placement === left || placement === right) && variation === end) {
+        sideY = bottom;
+        var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+        offsetParent[heightProp];
+        y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
       }
 
-      if (placement === left) {
-        sideX = right; // $FlowFixMe[prop-missing]
-
-        x -= offsetParent[widthProp] - popperRect.width;
+      if (placement === left || (placement === top || placement === bottom) && variation === end) {
+        sideX = right;
+        var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+        offsetParent[widthProp];
+        x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
       }
     }
@@ -519,7 +552,7 @@ var VueTippy = (function (exports, vue) {
     if (gpuAcceleration) {
       var _Object$assign;
 
-      return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+      return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
     }
 
     return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
@@ -547,9 +580,11 @@ var VueTippy = (function (exports, vue) {
 
     var commonStyles = {
       placement: getBasePlacement(state.placement),
+      variation: getVariation(state.placement),
       popper: state.elements.popper,
       popperRect: state.rects.popper,
-      gpuAcceleration: gpuAcceleration
+      gpuAcceleration: gpuAcceleration,
+      isFixed: state.options.strategy === 'fixed'
     };
 
     if (state.modifiersData.popperOffsets != null) {
@@ -807,7 +842,7 @@ var VueTippy = (function (exports, vue) {
   }
 
   function getClientRectFromMixedType(element, clippingParent) {
-    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
   } // A "clipping parent" is an overflowable container with the characteristic of
   // clipping (or hiding) overflowing elements with a position different from
   // `initial`
@@ -824,7 +859,7 @@ var VueTippy = (function (exports, vue) {
 
 
     return clippingParents.filter(function (clippingParent) {
-      return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+      return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle(clippingParent).position !== 'static' : true);
     });
   } // Gets the maximum area that the element is visible in due to any number of
   // clipping parents
@@ -849,10 +884,6 @@ var VueTippy = (function (exports, vue) {
     return clippingRect;
   }
 
-  function getVariation(placement) {
-    return placement.split('-')[1];
-  }
-
   function computeOffsets(_ref) {
     var reference = _ref.reference,
         element = _ref.element,
@@ -938,11 +969,10 @@ var VueTippy = (function (exports, vue) {
         padding = _options$padding === void 0 ? 0 : _options$padding;
     var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
     var altContext = elementContext === popper ? reference : popper;
-    var referenceElement = state.elements.reference;
     var popperRect = state.rects.popper;
     var element = state.elements[altBoundary ? altContext : elementContext];
     var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
-    var referenceClientRect = getBoundingClientRect(referenceElement);
+    var referenceClientRect = getBoundingClientRect(state.elements.reference);
     var popperOffsets = computeOffsets({
       reference: referenceClientRect,
       element: popperRect,
@@ -1329,6 +1359,14 @@ var VueTippy = (function (exports, vue) {
     var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
       placement: state.placement
     })) : tetherOffset;
+    var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+      mainAxis: tetherOffsetValue,
+      altAxis: tetherOffsetValue
+    } : Object.assign({
+      mainAxis: 0,
+      altAxis: 0
+    }, tetherOffsetValue);
+    var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
     var data = {
       x: 0,
       y: 0
@@ -1338,13 +1376,15 @@ var VueTippy = (function (exports, vue) {
       return;
     }
 
-    if (checkMainAxis || checkAltAxis) {
+    if (checkMainAxis) {
+      var _offsetModifierState$;
+
       var mainSide = mainAxis === 'y' ? top : left;
       var altSide = mainAxis === 'y' ? bottom : right;
       var len = mainAxis === 'y' ? 'height' : 'width';
       var offset = popperOffsets[mainAxis];
-      var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-      var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+      var min$1 = offset + overflow[mainSide];
+      var max$1 = offset - overflow[altSide];
       var additive = tether ? -popperRect[len] / 2 : 0;
       var minLen = variation === start ? referenceRect[len] : popperRect[len];
       var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -1364,36 +1404,45 @@ var VueTippy = (function (exports, vue) {
       // width or height)
 
       var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-      var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-      var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+      var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+      var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
       var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
       var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-      var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-      var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-      var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+      var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+      var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+      var tetherMax = offset + maxOffset - offsetModifierValue;
+      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+      popperOffsets[mainAxis] = preventedOffset;
+      data[mainAxis] = preventedOffset - offset;
+    }
 
-      if (checkMainAxis) {
-        var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-        popperOffsets[mainAxis] = preventedOffset;
-        data[mainAxis] = preventedOffset - offset;
-      }
+    if (checkAltAxis) {
+      var _offsetModifierState$2;
 
-      if (checkAltAxis) {
-        var _mainSide = mainAxis === 'x' ? top : left;
+      var _mainSide = mainAxis === 'x' ? top : left;
 
-        var _altSide = mainAxis === 'x' ? bottom : right;
+      var _altSide = mainAxis === 'x' ? bottom : right;
 
-        var _offset = popperOffsets[altAxis];
+      var _offset = popperOffsets[altAxis];
 
-        var _min = _offset + overflow[_mainSide];
+      var _len = altAxis === 'y' ? 'height' : 'width';
 
-        var _max = _offset - overflow[_altSide];
+      var _min = _offset + overflow[_mainSide];
 
-        var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+      var _max = _offset - overflow[_altSide];
 
-        popperOffsets[altAxis] = _preventedOffset;
-        data[altAxis] = _preventedOffset - _offset;
-      }
+      var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+      var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+      var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+      var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+      var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+      popperOffsets[altAxis] = _preventedOffset;
+      data[altAxis] = _preventedOffset - _offset;
     }
 
     state.modifiersData[name] = data;
@@ -1423,16 +1472,24 @@ var VueTippy = (function (exports, vue) {
     }
   }
 
+  function isElementScaled(element) {
+    var rect = element.getBoundingClientRect();
+    var scaleX = round(rect.width) / element.offsetWidth || 1;
+    var scaleY = round(rect.height) / element.offsetHeight || 1;
+    return scaleX !== 1 || scaleY !== 1;
+  } // Returns the composite rect of an element relative to its offsetParent.
   // Composite means it takes into account transforms as well as layout.
 
+
   function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     if (isFixed === void 0) {
       isFixed = false;
     }
 
-    var documentElement = getDocumentElement(offsetParent);
-    var rect = getBoundingClientRect(elementOrVirtualElement);
     var isOffsetParentAnElement = isHTMLElement(offsetParent);
+    var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+    var documentElement = getDocumentElement(offsetParent);
+    var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
     var scroll = {
       scrollLeft: 0,
       scrollTop: 0
@@ -1449,7 +1506,7 @@ var VueTippy = (function (exports, vue) {
       }
 
       if (isHTMLElement(offsetParent)) {
-        offsets = getBoundingClientRect(offsetParent);
+        offsets = getBoundingClientRect(offsetParent, true);
         offsets.x += offsetParent.clientLeft;
         offsets.y += offsetParent.clientTop;
       } else if (documentElement) {
@@ -1539,7 +1596,10 @@ var VueTippy = (function (exports, vue) {
   var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
   function validateModifiers(modifiers) {
     modifiers.forEach(function (modifier) {
-      Object.keys(modifier).forEach(function (key) {
+      [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
+      .filter(function (value, index, self) {
+        return self.indexOf(value) === index;
+      }).forEach(function (key) {
         switch (key) {
           case 'name':
             if (typeof modifier.name !== 'string') {
@@ -1553,6 +1613,8 @@ var VueTippy = (function (exports, vue) {
               console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
             }
 
+            break;
+
           case 'phase':
             if (modifierPhases.indexOf(modifier.phase) < 0) {
               console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
@@ -1568,14 +1630,14 @@ var VueTippy = (function (exports, vue) {
             break;
 
           case 'effect':
-            if (typeof modifier.effect !== 'function') {
+            if (modifier.effect != null && typeof modifier.effect !== 'function') {
               console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
             }
 
             break;
 
           case 'requires':
-            if (!Array.isArray(modifier.requires)) {
+            if (modifier.requires != null && !Array.isArray(modifier.requires)) {
               console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
             }
 
@@ -1685,7 +1747,8 @@ var VueTippy = (function (exports, vue) {
       var isDestroyed = false;
       var instance = {
         state: state,
-        setOptions: function setOptions(options) {
+        setOptions: function setOptions(setOptionsAction) {
+          var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
           cleanupModifierEffects();
           state.options = Object.assign({}, defaultOptions, state.options, options);
           state.scrollParents = {
@@ -1884,7 +1947,7 @@ var VueTippy = (function (exports, vue) {
   }); // eslint-disable-next-line import/no-unused-modules
 
   /**!
-  * tippy.js v6.3.1
+  * tippy.js v6.3.7
   * (c) 2017-2021 atomiks
   * MIT License
   */
@@ -1899,6 +1962,9 @@ var VueTippy = (function (exports, vue) {
     passive: true,
     capture: true
   };
+  var TIPPY_DEFAULT_APPEND_TO = function TIPPY_DEFAULT_APPEND_TO() {
+    return document.body;
+  };
 
   function hasOwnProperty(obj, key) {
     return {}.hasOwnProperty.call(obj, key);
@@ -2024,7 +2090,7 @@ var VueTippy = (function (exports, vue) {
         element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
 
 
-    return (element == null ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
+    return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
   }
   function isCursorOutsideInteractiveBorder(popperTreeData, event) {
     var clientX = event.clientX,
@@ -2060,6 +2126,26 @@ var VueTippy = (function (exports, vue) {
       box[method](event, listener);
     });
   }
+  /**
+   * Compared to xxx.contains, this function works for dom structures with shadow
+   * dom
+   */
+
+  function actualContains(parent, child) {
+    var target = child;
+
+    while (target) {
+      var _target$getRootNode;
+
+      if (parent.contains(target)) {
+        return true;
+      }
+
+      target = target.getRootNode == null ? void 0 : (_target$getRootNode = target.getRootNode()) == null ? void 0 : _target$getRootNode.host;
+    }
+
+    return false;
+  }
 
   var currentInput = {
     isTouch: false
@@ -2123,8 +2209,8 @@ var VueTippy = (function (exports, vue) {
   }
 
   var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
-  var ua = isBrowser ? navigator.userAgent : '';
-  var isIE = /MSIE |Trident\//.test(ua);
+  var isIE11 = isBrowser ? // @ts-ignore
+  !!window.msCrypto : false;
 
   function createMemoryLeakWarning(method) {
     var txt = method === 'destroy' ? 'n already-' : ' ';
@@ -2199,9 +2285,7 @@ var VueTippy = (function (exports, vue) {
     zIndex: 9999
   };
   var defaultProps = Object.assign({
-    appendTo: function appendTo() {
-      return document.body;
-    },
+    appendTo: TIPPY_DEFAULT_APPEND_TO,
     aria: {
       content: 'auto',
       expanded: 'auto'
@@ -2236,7 +2320,7 @@ var VueTippy = (function (exports, vue) {
     touch: true,
     trigger: 'mouseenter focus',
     triggerTarget: null
-  }, pluginProps, {}, renderProps);
+  }, pluginProps, renderProps);
   var defaultKeys = Object.keys(defaultProps);
   var setDefaultProps = function setDefaultProps(partialProps) {
     /* istanbul ignore else */
@@ -2256,12 +2340,14 @@ var VueTippy = (function (exports, vue) {
           defaultValue = plugin.defaultValue;
 
       if (name) {
-        acc[name] = passedProps[name] !== undefined ? passedProps[name] : defaultValue;
+        var _name;
+
+        acc[name] = passedProps[name] !== undefined ? passedProps[name] : (_name = defaultProps[name]) != null ? _name : defaultValue;
       }
 
       return acc;
     }, {});
-    return Object.assign({}, passedProps, {}, pluginProps);
+    return Object.assign({}, passedProps, pluginProps);
   }
   function getDataAttributeProps(reference, plugins) {
     var propKeys = plugins ? Object.keys(getExtendedPassedProps(Object.assign({}, defaultProps, {
@@ -2292,7 +2378,7 @@ var VueTippy = (function (exports, vue) {
     var out = Object.assign({}, props, {
       content: invokeWithArgsOrReturn(props.content, [reference])
     }, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
-    out.aria = Object.assign({}, defaultProps.aria, {}, out.aria);
+    out.aria = Object.assign({}, defaultProps.aria, out.aria);
     out.aria = {
       expanded: out.aria.expanded === 'auto' ? props.interactive : out.aria.expanded,
       content: out.aria.content === 'auto' ? props.interactive ? null : 'describedby' : out.aria.content
@@ -2453,7 +2539,7 @@ var VueTippy = (function (exports, vue) {
 
   var mountedInstances = [];
   function createTippy(reference, passedProps) {
-    var props = evaluateProps(reference, Object.assign({}, defaultProps, {}, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
+    var props = evaluateProps(reference, Object.assign({}, defaultProps, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
     // 🔒 Private members
     // ===========================================================================
 
@@ -2553,10 +2639,9 @@ var VueTippy = (function (exports, vue) {
         instance.clearDelayTimeouts();
       }
     });
-    popper.addEventListener('mouseleave', function (event) {
+    popper.addEventListener('mouseleave', function () {
       if (instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0) {
         getDocument().addEventListener('mousemove', debouncedOnMouseMove);
-        debouncedOnMouseMove(event);
       }
     });
     return instance; // ===========================================================================
@@ -2576,7 +2661,7 @@ var VueTippy = (function (exports, vue) {
       var _instance$props$rende;
 
       // @ts-ignore
-      return !!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy);
+      return !!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy);
     }
 
     function getCurrentTarget() {
@@ -2603,8 +2688,12 @@ var VueTippy = (function (exports, vue) {
       return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps.delay);
     }
 
-    function handleStyles() {
-      popper.style.pointerEvents = instance.props.interactive && instance.state.isVisible ? '' : 'none';
+    function handleStyles(fromHide) {
+      if (fromHide === void 0) {
+        fromHide = false;
+      }
+
+      popper.style.pointerEvents = instance.props.interactive && !fromHide ? '' : 'none';
       popper.style.zIndex = "" + instance.props.zIndex;
     }
 
@@ -2615,7 +2704,7 @@ var VueTippy = (function (exports, vue) {
 
       pluginsHooks.forEach(function (pluginHooks) {
         if (pluginHooks[hook]) {
-          pluginHooks[hook].apply(void 0, args);
+          pluginHooks[hook].apply(pluginHooks, args);
         }
       });
 
@@ -2681,15 +2770,18 @@ var VueTippy = (function (exports, vue) {
         if (didTouchMove || event.type === 'mousedown') {
           return;
         }
-      } // Clicked on interactive popper
+      }
 
+      var actualTarget = event.composedPath && event.composedPath()[0] || event.target; // Clicked on interactive popper
 
-      if (instance.props.interactive && popper.contains(event.target)) {
+      if (instance.props.interactive && actualContains(popper, actualTarget)) {
         return;
       } // Clicked on the event listeners target
 
 
-      if (getCurrentTarget().contains(event.target)) {
+      if (normalizeToArray(instance.props.triggerTarget || reference).some(function (el) {
+        return actualContains(el, actualTarget);
+      })) {
         if (currentInput.isTouch) {
           return;
         }
@@ -2817,7 +2909,7 @@ var VueTippy = (function (exports, vue) {
             break;
 
           case 'focus':
-            on(isIE ? 'focusout' : 'blur', onBlurOrFocusOut);
+            on(isIE11 ? 'focusout' : 'blur', onBlurOrFocusOut);
             break;
 
           case 'focusin':
@@ -3043,7 +3135,7 @@ var VueTippy = (function (exports, vue) {
 
       var node = getCurrentTarget();
 
-      if (instance.props.interactive && appendTo === defaultProps.appendTo || appendTo === 'parent') {
+      if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO || appendTo === 'parent') {
         parentNode = node.parentNode;
       } else {
         parentNode = invokeWithArgsOrReturn(appendTo, [node]);
@@ -3055,6 +3147,7 @@ var VueTippy = (function (exports, vue) {
         parentNode.appendChild(popper);
       }
 
+      instance.state.isMounted = true;
       createPopperInstance();
       /* istanbul ignore else */
 
@@ -3162,7 +3255,7 @@ var VueTippy = (function (exports, vue) {
       invokeHook('onBeforeUpdate', [instance, partialProps]);
       removeListeners();
       var prevProps = instance.props;
-      var nextProps = evaluateProps(reference, Object.assign({}, instance.props, {}, partialProps, {
+      var nextProps = evaluateProps(reference, Object.assign({}, prevProps, removeUndefinedProps(partialProps), {
         ignoreAttributes: true
       }));
       instance.props = nextProps;
@@ -3291,7 +3384,6 @@ var VueTippy = (function (exports, vue) {
         // popper has been positioned for the first time
 
         (_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
-        instance.state.isMounted = true;
         invokeHook('onMount', [instance]);
 
         if (instance.props.animation && getIsDefaultRenderFn()) {
@@ -3338,7 +3430,7 @@ var VueTippy = (function (exports, vue) {
 
       cleanupInteractiveMouseListeners();
       removeDocumentPress();
-      handleStyles();
+      handleStyles(true);
 
       if (getIsDefaultRenderFn()) {
         var _getDefaultTemplateCh4 = getDefaultTemplateChildren(),
@@ -3512,11 +3604,20 @@ var VueTippy = (function (exports, vue) {
 
     var individualInstances = tippyInstances;
     var references = [];
+    var triggerTargets = [];
     var currentTarget;
     var overrides = optionalProps.overrides;
     var interceptSetPropsCleanups = [];
     var shownOnCreate = false;
 
+    function setTriggerTargets() {
+      triggerTargets = individualInstances.map(function (instance) {
+        return normalizeToArray(instance.props.triggerTarget || instance.reference);
+      }).reduce(function (acc, item) {
+        return acc.concat(item);
+      }, []);
+    }
+
     function setReferences() {
       references = individualInstances.map(function (instance) {
         return instance.reference;
@@ -3553,7 +3654,7 @@ var VueTippy = (function (exports, vue) {
 
 
     function prepareInstance(singleton, target) {
-      var index = references.indexOf(target); // bail-out
+      var index = triggerTargets.indexOf(target); // bail-out
 
       if (target === currentTarget) {
         return;
@@ -3566,13 +3667,16 @@ var VueTippy = (function (exports, vue) {
       }, {});
       singleton.setProps(Object.assign({}, overrideProps, {
         getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
-          return target.getBoundingClientRect();
+          var _references$index;
+
+          return (_references$index = references[index]) == null ? void 0 : _references$index.getBoundingClientRect();
         }
       }));
     }
 
     enableInstances(false);
     setReferences();
+    setTriggerTargets();
     var plugin = {
       fn: function fn() {
         return {
@@ -3602,7 +3706,7 @@ var VueTippy = (function (exports, vue) {
     };
     var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ['overrides']), {
       plugins: [plugin].concat(optionalProps.plugins || []),
-      triggerTarget: references,
+      triggerTarget: triggerTargets,
       popperOptions: Object.assign({}, optionalProps.popperOptions, {
         modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
       })
@@ -3629,13 +3733,13 @@ var VueTippy = (function (exports, vue) {
       } // target is a child tippy instance
 
 
-      if (individualInstances.includes(target)) {
+      if (individualInstances.indexOf(target) >= 0) {
         var ref = target.reference;
         return prepareInstance(singleton, ref);
       } // target is a ReferenceElement
 
 
-      if (references.includes(target)) {
+      if (references.indexOf(target) >= 0) {
         return prepareInstance(singleton, target);
       }
     };
@@ -3678,9 +3782,10 @@ var VueTippy = (function (exports, vue) {
       individualInstances = nextInstances;
       enableInstances(false);
       setReferences();
-      interceptSetProps(singleton);
+      setTriggerTargets();
+      interceptSetPropsCleanups = interceptSetProps(singleton);
       singleton.setProps({
-        triggerTarget: references
+        triggerTarget: triggerTargets
       });
     };
 
@@ -3695,7 +3800,7 @@ var VueTippy = (function (exports, vue) {
       var _instance$props$rende;
 
       // @ts-ignore
-      if (!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy)) {
+      if (!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy)) {
         if (process.env.NODE_ENV !== "production") {
           errorWhen(instance.props.animateFill, 'The `animateFill` plugin requires the default render function.');
         }
@@ -3820,6 +3925,7 @@ var VueTippy = (function (exports, vue) {
 
         if (isCursorOverReference || !instance.props.interactive) {
           instance.setProps({
+            // @ts-ignore - unneeded DOMRect properties
             getReferenceClientRect: function getReferenceClientRect() {
               var rect = reference.getBoundingClientRect();
               var x = clientX;
@@ -3956,6 +4062,7 @@ var VueTippy = (function (exports, vue) {
       var placement;
       var cursorRectIndex = -1;
       var isInternalUpdate = false;
+      var triedPlacements = [];
       var modifier = {
         name: 'tippyInlinePositioning',
         enabled: true,
@@ -3964,8 +4071,14 @@ var VueTippy = (function (exports, vue) {
           var state = _ref2.state;
 
           if (isEnabled()) {
-            if (placement !== state.placement) {
+            if (triedPlacements.indexOf(state.placement) !== -1) {
+              triedPlacements = [];
+            }
+
+            if (placement !== state.placement && triedPlacements.indexOf(state.placement) === -1) {
+              triedPlacements.push(state.placement);
               instance.setProps({
+                // @ts-ignore - unneeded DOMRect properties
                 getReferenceClientRect: function getReferenceClientRect() {
                   return _getReferenceClientRect(state.placement);
                 }
@@ -4002,10 +4115,11 @@ var VueTippy = (function (exports, vue) {
             var cursorRect = rects.find(function (rect) {
               return rect.left - 2 <= event.clientX && rect.right + 2 >= event.clientX && rect.top - 2 <= event.clientY && rect.bottom + 2 >= event.clientY;
             });
-            cursorRectIndex = rects.indexOf(cursorRect);
+            var index = rects.indexOf(cursorRect);
+            cursorRectIndex = index > -1 ? index : cursorRectIndex;
           }
         },
-        onUntrigger: function onUntrigger() {
+        onHidden: function onHidden() {
           cursorRectIndex = -1;
         }
       };
@@ -4151,6 +4265,13 @@ var VueTippy = (function (exports, vue) {
   function useTippy(el, opts = {}, settings = { mount: true }) {
       const vm = vue.getCurrentInstance();
       const instance = vue.ref();
+      const state = vue.ref({
+          isEnabled: false,
+          isVisible: false,
+          isDestroyed: false,
+          isMounted: false,
+          isShown: false,
+      });
       let container = null;
       const getContainer = () => {
           if (container)
@@ -4202,6 +4323,38 @@ var VueTippy = (function (exports, vue) {
                   ? options.triggerTarget.value
                   : options.triggerTarget;
           }
+          options.plugins.push({
+              fn() {
+                  return {
+                      onCreate() {
+                          state.value.isEnabled = true;
+                      },
+                      onMount() {
+                          state.value.isMounted = true;
+                      },
+                      onShow() {
+                          state.value.isMounted = true;
+                          state.value.isVisible = true;
+                      },
+                      onShown() {
+                          state.value.isShown = true;
+                      },
+                      onHide() {
+                          state.value.isMounted = false;
+                          state.value.isVisible = false;
+                      },
+                      onHidden() {
+                          state.value.isShown = false;
+                      },
+                      onUnmounted() {
+                          state.value.isMounted = false;
+                      },
+                      onDestroy() {
+                          state.value.isDestroyed = true;
+                      },
+                  };
+              }
+          });
           return options;
       };
       const refresh = () => {
@@ -4240,10 +4393,12 @@ var VueTippy = (function (exports, vue) {
       const disable = () => {
           var _a;
           (_a = instance.value) === null || _a === void 0 ? void 0 : _a.disable();
+          state.value.isEnabled = false;
       };
       const enable = () => {
           var _a;
           (_a = instance.value) === null || _a === void 0 ? void 0 : _a.enable();
+          state.value.isEnabled = true;
       };
       const unmount = () => {
           var _a;
@@ -4274,6 +4429,7 @@ var VueTippy = (function (exports, vue) {
           enable,
           unmount,
           mount,
+          state,
       };
       if (settings.mount) {
           if (vm) {
@@ -4392,9 +4548,11 @@ var VueTippy = (function (exports, vue) {
   };
   const TippyComponent = vue.defineComponent({
       props,
-      setup(props, { slots }) {
+      emits: ['state'],
+      setup(props, { slots, emit }) {
           const elem = vue.ref();
           const contentElem = vue.ref();
+          const mounted = vue.ref(false);
           let options = { ...props };
           for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
               if (options.hasOwnProperty(prop)) {
@@ -4404,7 +4562,7 @@ var VueTippy = (function (exports, vue) {
           }
           let target = elem;
           if (props.to) {
-              if (props.to instanceof Element) {
+              if (typeof Element !== 'undefined' && props.to instanceof Element) {
                   target = () => props.to;
               }
               else if (typeof props.to === 'string' || props.to instanceof String) {
@@ -4413,16 +4571,22 @@ var VueTippy = (function (exports, vue) {
           }
           const tippy = useTippy(target, options);
           vue.onMounted(() => {
-              if (slots.content)
-                  tippy.setContent(() => contentElem.value);
+              mounted.value = true;
+              vue.nextTick(() => {
+                  if (slots.content)
+                      tippy.setContent(() => contentElem.value);
+              });
           });
-          return { elem, contentElem, ...tippy };
+          vue.watch(tippy.state, () => {
+              emit('state', vue.unref(tippy.state));
+          }, { immediate: true, deep: true });
+          return { elem, contentElem, mounted, ...tippy };
       },
       render() {
           let slot = this.$slots.default ? this.$slots.default(this) : [];
           return vue.h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
               slot,
-              vue.h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
+              vue.h(this.contentTag, { ref: 'contentElem', style: { display: this.mounted ? 'inherit' : 'none' }, class: this.contentClass }, this.$slots.content(this)),
           ] : slot);
       },
   });