vue-tippy 6.0.0-alpha.9 → 6.0.0-beta.0

package/dist/{vue-tippy.global.js → vue-tippy.iife.js}

@@ -1,9 +1,9 @@
 /*!
-  * vue-tippy v6.0.0-alpha.8
-  * (c) 2020 Georges KABBOUCHI
+  * vue-tippy v6.0.0-beta.0
+  * (c) 2022 
   * @license MIT
   */
-var VueTippy = (function (exports, vueDemi) {
+var VueTippy = (function (exports, vue) {
   'use strict';
 
   var top = 'top';
@@ -42,10 +42,11 @@ var VueTippy = (function (exports, vueDemi) {
     return element ? (element.nodeName || '').toLowerCase() : null;
   }
 
-  /*:: import type { Window } from '../types'; */
-
-  /*:: declare function getWindow(node: Node | Window): Window; */
   function getWindow(node) {
+    if (node == null) {
+      return window;
+    }
+
     if (node.toString() !== '[object Window]') {
       var ownerDocument = node.ownerDocument;
       return ownerDocument ? ownerDocument.defaultView || window : window;
@@ -54,26 +55,22 @@ var VueTippy = (function (exports, vueDemi) {
     return node;
   }
 
-  /*:: declare function isElement(node: mixed): boolean %checks(node instanceof
-    Element); */
-
   function isElement(node) {
     var OwnElement = getWindow(node).Element;
     return node instanceof OwnElement || node instanceof Element;
   }
-  /*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
-    HTMLElement); */
-
 
   function isHTMLElement(node) {
     var OwnElement = getWindow(node).HTMLElement;
     return node instanceof OwnElement || node instanceof HTMLElement;
   }
-  /*:: declare function isShadowRoot(node: mixed): boolean %checks(node instanceof
-    ShadowRoot); */
-
 
   function isShadowRoot(node) {
+    // IE 11 has no ShadowRoot
+    if (typeof ShadowRoot === 'undefined') {
+      return false;
+    }
+
     var OwnElement = getWindow(node).ShadowRoot;
     return node instanceof OwnElement || node instanceof ShadowRoot;
   }
@@ -122,6 +119,7 @@ var VueTippy = (function (exports, vueDemi) {
       reference: {}
     };
     Object.assign(state.elements.popper.style, initialStyles.popper);
+    state.styles = initialStyles;
 
     if (state.elements.arrow) {
       Object.assign(state.elements.arrow.style, initialStyles.arrow);
@@ -164,14 +162,67 @@ var VueTippy = (function (exports, vueDemi) {
     return placement.split('-')[0];
   }
 
-  // Returns the layout rect of an element relative to its offsetParent. Layout
+  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 / 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
+    };
+  }
+
   // means it doesn't take into account transforms.
+
   function getLayoutRect(element) {
+    var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+    // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+    var width = element.offsetWidth;
+    var height = element.offsetHeight;
+
+    if (Math.abs(clientRect.width - width) <= 1) {
+      width = clientRect.width;
+    }
+
+    if (Math.abs(clientRect.height - height) <= 1) {
+      height = clientRect.height;
+    }
+
     return {
       x: element.offsetLeft,
       y: element.offsetTop,
-      width: element.offsetWidth,
-      height: element.offsetHeight
+      width: width,
+      height: height
     };
   }
 
@@ -221,9 +272,8 @@ var VueTippy = (function (exports, vueDemi) {
       // $FlowFixMe[incompatible-return]
       // $FlowFixMe[prop-missing]
       element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-      element.parentNode || // DOM Element detected
-      // $FlowFixMe[incompatible-return]: need a better way to handle this...
-      element.host || // ShadowRoot detected
+      element.parentNode || ( // DOM Element detected
+      isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
       // $FlowFixMe[incompatible-call]: HTMLElement is a Node
       getDocumentElement(element) // fallback
 
@@ -236,29 +286,32 @@ var VueTippy = (function (exports, vueDemi) {
       return null;
     }
 
-    var offsetParent = element.offsetParent;
-
-    if (offsetParent) {
-      var html = getDocumentElement(offsetParent);
-
-      if (getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && getComputedStyle(html).position !== 'static') {
-        return html;
-      }
-    }
-
-    return offsetParent;
+    return element.offsetParent;
   } // `.offsetParent` reports `null` for fixed elements, while absolute elements
   // return the containing block
 
 
   function getContainingBlock(element) {
+    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
+    var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+
+    if (isIE && isHTMLElement(element)) {
+      // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+      var elementCss = getComputedStyle(element);
+
+      if (elementCss.position === 'fixed') {
+        return null;
+      }
+    }
+
     var currentNode = getParentNode(element);
 
     while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
       var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
       // create a containing block.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
-      if (css.transform !== 'none' || css.perspective !== 'none' || css.willChange && css.willChange !== 'auto') {
+      if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
         return currentNode;
       } else {
         currentNode = currentNode.parentNode;
@@ -278,7 +331,7 @@ var VueTippy = (function (exports, vueDemi) {
       offsetParent = getTrueOffsetParent(offsetParent);
     }
 
-    if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
+    if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
       return window;
     }
 
@@ -289,8 +342,12 @@ var VueTippy = (function (exports, vueDemi) {
     return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
   }
 
-  function within(min, value, max) {
-    return Math.max(min, Math.min(value, max));
+  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() {
@@ -303,7 +360,7 @@ var VueTippy = (function (exports, vueDemi) {
   }
 
   function mergePaddingObject(paddingObject) {
-    return Object.assign(Object.assign({}, getFreshSideObject()), paddingObject);
+    return Object.assign({}, getFreshSideObject(), paddingObject);
   }
 
   function expandToHashMap(value, keys) {
@@ -313,11 +370,19 @@ var VueTippy = (function (exports, vueDemi) {
     }, {});
   }
 
+  var toPaddingObject = function toPaddingObject(padding, state) {
+    padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
+      placement: state.placement
+    })) : padding;
+    return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+  };
+
   function arrow(_ref) {
     var _state$modifiersData$;
 
     var state = _ref.state,
-        name = _ref.name;
+        name = _ref.name,
+        options = _ref.options;
     var arrowElement = state.elements.arrow;
     var popperOffsets = state.modifiersData.popperOffsets;
     var basePlacement = getBasePlacement(state.placement);
@@ -329,7 +394,7 @@ var VueTippy = (function (exports, vueDemi) {
       return;
     }
 
-    var paddingObject = state.modifiersData[name + "#persistent"].padding;
+    var paddingObject = toPaddingObject(options.padding, state);
     var arrowRect = getLayoutRect(arrowElement);
     var minProp = axis === 'y' ? top : left;
     var maxProp = axis === 'y' ? bottom : right;
@@ -351,12 +416,9 @@ var VueTippy = (function (exports, vueDemi) {
 
   function effect$1(_ref2) {
     var state = _ref2.state,
-        options = _ref2.options,
-        name = _ref2.name;
+        options = _ref2.options;
     var _options$element = options.element,
-        arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element,
-        _options$padding = options.padding,
-        padding = _options$padding === void 0 ? 0 : _options$padding;
+        arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
 
     if (arrowElement == null) {
       return;
@@ -371,15 +433,21 @@ var VueTippy = (function (exports, vueDemi) {
       }
     }
 
+    {
+      if (!isHTMLElement(arrowElement)) {
+        console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
+      }
+    }
+
     if (!contains(state.elements.popper, arrowElement)) {
+      {
+        console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
+      }
 
       return;
     }
 
     state.elements.arrow = arrowElement;
-    state.modifiersData[name + "#persistent"] = {
-      padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
-    };
   } // eslint-disable-next-line import/no-unused-modules
 
 
@@ -393,6 +461,10 @@ var VueTippy = (function (exports, vueDemi) {
     requiresIfExists: ['preventOverflow']
   };
 
+  function getVariation(placement) {
+    return placement.split('-')[1];
+  }
+
   var unsetSides = {
     top: 'auto',
     right: 'auto',
@@ -408,8 +480,8 @@ var VueTippy = (function (exports, vueDemi) {
     var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
-      x: Math.round(x * dpr) / dpr || 0,
-      y: Math.round(y * dpr) / dpr || 0
+      x: round(x * dpr) / dpr || 0,
+      y: round(y * dpr) / dpr || 0
     };
   }
 
@@ -419,13 +491,15 @@ var VueTippy = (function (exports, vueDemi) {
     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 ? roundOffsetsByDPR(offsets) : offsets,
+    var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
         _ref3$x = _ref3.x,
         x = _ref3$x === void 0 ? 0 : _ref3$x,
         _ref3$y = _ref3.y,
@@ -439,23 +513,34 @@ var VueTippy = (function (exports, vueDemi) {
 
     if (adaptive) {
       var offsetParent = getOffsetParent(popper);
+      var heightProp = 'clientHeight';
+      var widthProp = 'clientWidth';
 
       if (offsetParent === getWindow(popper)) {
         offsetParent = getDocumentElement(popper);
+
+        if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+          heightProp = 'scrollHeight';
+          widthProp = 'scrollWidth';
+        }
       } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
 
-      /*:: offsetParent = (offsetParent: Element); */
 
+      offsetParent = offsetParent;
 
-      if (placement === top) {
+      if (placement === top || (placement === left || placement === right) && variation === end) {
         sideY = bottom;
-        y -= offsetParent.clientHeight - popperRect.height;
+        var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+        offsetParent[heightProp];
+        y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
       }
 
-      if (placement === left) {
+      if (placement === left || (placement === top || placement === bottom) && variation === end) {
         sideX = right;
-        x -= offsetParent.clientWidth - popperRect.width;
+        var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+        offsetParent[widthProp];
+        x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
       }
     }
@@ -467,10 +552,10 @@ var VueTippy = (function (exports, vueDemi) {
     if (gpuAcceleration) {
       var _Object$assign;
 
-      return Object.assign(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(Object.assign({}, commonStyles), {}, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
+    return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
   }
 
   function computeStyles(_ref4) {
@@ -483,15 +568,27 @@ var VueTippy = (function (exports, vueDemi) {
         _options$roundOffsets = options.roundOffsets,
         roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
 
+    {
+      var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';
+
+      if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
+        return transitionProperty.indexOf(property) >= 0;
+      })) {
+        console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
+      }
+    }
+
     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) {
-      state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), mapToStyles(Object.assign(Object.assign({}, commonStyles), {}, {
+      state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
         offsets: state.modifiersData.popperOffsets,
         position: state.options.strategy,
         adaptive: adaptive,
@@ -500,7 +597,7 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     if (state.modifiersData.arrow != null) {
-      state.styles.arrow = Object.assign(Object.assign({}, state.styles.arrow), mapToStyles(Object.assign(Object.assign({}, commonStyles), {}, {
+      state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
         offsets: state.modifiersData.arrow,
         position: 'absolute',
         adaptive: false,
@@ -508,7 +605,7 @@ var VueTippy = (function (exports, vueDemi) {
       })));
     }
 
-    state.attributes.popper = Object.assign(Object.assign({}, state.attributes.popper), {}, {
+    state.attributes.popper = Object.assign({}, state.attributes.popper, {
       'data-popper-placement': state.placement
     });
   } // eslint-disable-next-line import/no-unused-modules
@@ -592,20 +689,6 @@ var VueTippy = (function (exports, vueDemi) {
     });
   }
 
-  function getBoundingClientRect(element) {
-    var rect = element.getBoundingClientRect();
-    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
-    };
-  }
-
   function getWindowScroll(node) {
     var win = getWindow(node);
     var scrollLeft = win.pageXOffset;
@@ -668,16 +751,18 @@ var VueTippy = (function (exports, vueDemi) {
   // of the `<html>` and `<body>` rect bounds if horizontally scrollable
 
   function getDocumentRect(element) {
+    var _element$ownerDocumen;
+
     var html = getDocumentElement(element);
     var winScroll = getWindowScroll(element);
-    var body = element.ownerDocument.body;
-    var width = Math.max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
-    var height = Math.max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+    var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+    var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+    var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
     var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
     var y = -winScroll.scrollTop;
 
     if (getComputedStyle(body || html).direction === 'rtl') {
-      x += Math.max(html.clientWidth, body ? body.clientWidth : 0) - width;
+      x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
     }
 
     return {
@@ -719,12 +804,14 @@ var VueTippy = (function (exports, vueDemi) {
   */
 
   function listScrollParents(element, list) {
+    var _element$ownerDocumen;
+
     if (list === void 0) {
       list = [];
     }
 
     var scrollParent = getScrollParent(element);
-    var isBody = getNodeName(scrollParent) === 'body';
+    var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
     var win = getWindow(scrollParent);
     var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
     var updatedList = list.concat(target);
@@ -733,7 +820,7 @@ var VueTippy = (function (exports, vueDemi) {
   }
 
   function rectToClientRect(rect) {
-    return Object.assign(Object.assign({}, rect), {}, {
+    return Object.assign({}, rect, {
       left: rect.x,
       top: rect.y,
       right: rect.x + rect.width,
@@ -755,7 +842,7 @@ var VueTippy = (function (exports, vueDemi) {
   }
 
   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`
@@ -772,7 +859,7 @@ var VueTippy = (function (exports, vueDemi) {
 
 
     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
@@ -784,10 +871,10 @@ var VueTippy = (function (exports, vueDemi) {
     var firstClippingParent = clippingParents[0];
     var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
       var rect = getClientRectFromMixedType(element, clippingParent);
-      accRect.top = Math.max(rect.top, accRect.top);
-      accRect.right = Math.min(rect.right, accRect.right);
-      accRect.bottom = Math.min(rect.bottom, accRect.bottom);
-      accRect.left = Math.max(rect.left, accRect.left);
+      accRect.top = max(rect.top, accRect.top);
+      accRect.right = min(rect.right, accRect.right);
+      accRect.bottom = min(rect.bottom, accRect.bottom);
+      accRect.left = max(rect.left, accRect.left);
       return accRect;
     }, getClientRectFromMixedType(element, firstClippingParent));
     clippingRect.width = clippingRect.right - clippingRect.left;
@@ -797,10 +884,6 @@ var VueTippy = (function (exports, vueDemi) {
     return clippingRect;
   }
 
-  function getVariation(placement) {
-    return placement.split('-')[1];
-  }
-
   function computeOffsets(_ref) {
     var reference = _ref.reference,
         element = _ref.element,
@@ -886,18 +969,17 @@ var VueTippy = (function (exports, vueDemi) {
         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,
       strategy: 'absolute',
       placement: placement
     });
-    var popperClientRect = rectToClientRect(Object.assign(Object.assign({}, popperRect), popperOffsets));
+    var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
     var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
     // 0 or negative = within the clipping rect
 
@@ -921,9 +1003,6 @@ var VueTippy = (function (exports, vueDemi) {
     return overflowOffsets;
   }
 
-  /*:: type OverflowsMap = { [ComputedPlacement]: number }; */
-
-  /*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
   function computeAutoPlacement(state, options) {
     if (options === void 0) {
       options = {};
@@ -947,6 +1026,10 @@ var VueTippy = (function (exports, vueDemi) {
 
     if (allowedPlacements.length === 0) {
       allowedPlacements = placements$1;
+
+      {
+        console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
+      }
     } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -1148,7 +1231,7 @@ var VueTippy = (function (exports, vueDemi) {
       isReferenceHidden: isReferenceHidden,
       hasPopperEscaped: hasPopperEscaped
     };
-    state.attributes.popper = Object.assign(Object.assign({}, state.attributes.popper), {}, {
+    state.attributes.popper = Object.assign({}, state.attributes.popper, {
       'data-popper-reference-hidden': isReferenceHidden,
       'data-popper-escaped': hasPopperEscaped
     });
@@ -1167,7 +1250,7 @@ var VueTippy = (function (exports, vueDemi) {
     var basePlacement = getBasePlacement(placement);
     var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
 
-    var _ref = typeof offset === 'function' ? offset(Object.assign(Object.assign({}, rects), {}, {
+    var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
       placement: placement
     })) : offset,
         skidding = _ref[0],
@@ -1273,9 +1356,17 @@ var VueTippy = (function (exports, vueDemi) {
     var popperOffsets = state.modifiersData.popperOffsets;
     var referenceRect = state.rects.reference;
     var popperRect = state.rects.popper;
-    var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign(Object.assign({}, state.rects), {}, {
+    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
@@ -1286,12 +1377,14 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     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 = popperOffsets[mainAxis] + overflow[mainSide];
-      var max = 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
@@ -1311,30 +1404,42 @@ var VueTippy = (function (exports, vueDemi) {
       // 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 preventedOffset = within(tether ? Math.min(min, tetherMin) : min, offset, tether ? Math.max(max, tetherMax) : max);
+      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 (checkAltAxis) {
+      var _offsetModifierState$2;
+
       var _mainSide = mainAxis === 'x' ? top : left;
 
       var _altSide = mainAxis === 'x' ? bottom : right;
 
       var _offset = popperOffsets[altAxis];
 
+      var _len = altAxis === 'y' ? 'height' : 'width';
+
       var _min = _offset + overflow[_mainSide];
 
       var _max = _offset - overflow[_altSide];
 
-      var _preventedOffset = within(_min, _offset, _max);
+      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;
@@ -1367,16 +1472,24 @@ var VueTippy = (function (exports, vueDemi) {
     }
   }
 
+  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
@@ -1393,7 +1506,7 @@ var VueTippy = (function (exports, vueDemi) {
       }
 
       if (isHTMLElement(offsetParent)) {
-        offsets = getBoundingClientRect(offsetParent);
+        offsets = getBoundingClientRect(offsetParent, true);
         offsets.x += offsetParent.clientLeft;
         offsets.y += offsetParent.clientTop;
       } else if (documentElement) {
@@ -1468,12 +1581,114 @@ var VueTippy = (function (exports, vueDemi) {
     };
   }
 
+  function format(str) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return [].concat(args).reduce(function (p, c) {
+      return p.replace(/%s/, c);
+    }, str);
+  }
+
+  var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
+  var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
+  var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
+  function validateModifiers(modifiers) {
+    modifiers.forEach(function (modifier) {
+      [].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') {
+              console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
+            }
+
+            break;
+
+          case 'enabled':
+            if (typeof modifier.enabled !== 'boolean') {
+              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) + "\""));
+            }
+
+            break;
+
+          case 'fn':
+            if (typeof modifier.fn !== 'function') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
+            }
+
+            break;
+
+          case 'effect':
+            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 (modifier.requires != null && !Array.isArray(modifier.requires)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
+            }
+
+            break;
+
+          case 'requiresIfExists':
+            if (!Array.isArray(modifier.requiresIfExists)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
+            }
+
+            break;
+
+          case 'options':
+          case 'data':
+            break;
+
+          default:
+            console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
+              return "\"" + s + "\"";
+            }).join(', ') + "; but \"" + key + "\" was provided.");
+        }
+
+        modifier.requires && modifier.requires.forEach(function (requirement) {
+          if (modifiers.find(function (mod) {
+            return mod.name === requirement;
+          }) == null) {
+            console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
+          }
+        });
+      });
+    });
+  }
+
+  function uniqueBy(arr, fn) {
+    var identifiers = new Set();
+    return arr.filter(function (item) {
+      var identifier = fn(item);
+
+      if (!identifiers.has(identifier)) {
+        identifiers.add(identifier);
+        return true;
+      }
+    });
+  }
+
   function mergeByName(modifiers) {
     var merged = modifiers.reduce(function (merged, current) {
       var existing = merged[current.name];
-      merged[current.name] = existing ? Object.assign(Object.assign(Object.assign({}, existing), current), {}, {
-        options: Object.assign(Object.assign({}, existing.options), current.options),
-        data: Object.assign(Object.assign({}, existing.data), current.data)
+      merged[current.name] = existing ? Object.assign({}, existing, current, {
+        options: Object.assign({}, existing.options, current.options),
+        data: Object.assign({}, existing.data, current.data)
       }) : current;
       return merged;
     }, {}); // IE11 does not support Object.values
@@ -1483,6 +1698,8 @@ var VueTippy = (function (exports, vueDemi) {
     });
   }
 
+  var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
+  var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
   var DEFAULT_OPTIONS = {
     placement: 'bottom',
     modifiers: [],
@@ -1517,7 +1734,7 @@ var VueTippy = (function (exports, vueDemi) {
       var state = {
         placement: 'bottom',
         orderedModifiers: [],
-        options: Object.assign(Object.assign({}, DEFAULT_OPTIONS), defaultOptions),
+        options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
         modifiersData: {},
         elements: {
           reference: reference,
@@ -1530,9 +1747,10 @@ var VueTippy = (function (exports, vueDemi) {
       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(Object.assign(Object.assign({}, defaultOptions), state.options), options);
+          state.options = Object.assign({}, defaultOptions, state.options, options);
           state.scrollParents = {
             reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
             popper: listScrollParents(popper)
@@ -1544,6 +1762,40 @@ var VueTippy = (function (exports, vueDemi) {
           state.orderedModifiers = orderedModifiers.filter(function (m) {
             return m.enabled;
           }); // Validate the provided modifiers so that the consumer will get warned
+          // if one of the modifiers is invalid for any reason
+
+          {
+            var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
+              var name = _ref.name;
+              return name;
+            });
+            validateModifiers(modifiers);
+
+            if (getBasePlacement(state.options.placement) === auto) {
+              var flipModifier = state.orderedModifiers.find(function (_ref2) {
+                var name = _ref2.name;
+                return name === 'flip';
+              });
+
+              if (!flipModifier) {
+                console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
+              }
+            }
+
+            var _getComputedStyle = getComputedStyle(popper),
+                marginTop = _getComputedStyle.marginTop,
+                marginRight = _getComputedStyle.marginRight,
+                marginBottom = _getComputedStyle.marginBottom,
+                marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
+            // cause bugs with positioning, so we'll warn the consumer
+
+
+            if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
+              return parseFloat(margin);
+            })) {
+              console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
+            }
+          }
 
           runModifierEffects();
           return instance.update();
@@ -1564,6 +1816,9 @@ var VueTippy = (function (exports, vueDemi) {
           // anymore
 
           if (!areValidElements(reference, popper)) {
+            {
+              console.error(INVALID_ELEMENT_ERROR);
+            }
 
             return;
           } // Store the reference and popper rects to be read by modifiers
@@ -1587,8 +1842,17 @@ var VueTippy = (function (exports, vueDemi) {
           state.orderedModifiers.forEach(function (modifier) {
             return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
           });
+          var __debug_loops__ = 0;
 
           for (var index = 0; index < state.orderedModifiers.length; index++) {
+            {
+              __debug_loops__ += 1;
+
+              if (__debug_loops__ > 100) {
+                console.error(INFINITE_LOOP_ERROR);
+                break;
+              }
+            }
 
             if (state.reset === true) {
               state.reset = false;
@@ -1627,6 +1891,9 @@ var VueTippy = (function (exports, vueDemi) {
       };
 
       if (!areValidElements(reference, popper)) {
+        {
+          console.error(INVALID_ELEMENT_ERROR);
+        }
 
         return instance;
       }
@@ -1680,10 +1947,12 @@ var VueTippy = (function (exports, vueDemi) {
   }); // eslint-disable-next-line import/no-unused-modules
 
   /**!
-  * tippy.js v6.2.7
-  * (c) 2017-2020 atomiks
+  * tippy.js v6.3.7
+  * (c) 2017-2021 atomiks
   * MIT License
   */
+
+  var ROUND_ARROW = '<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>';
   var BOX_CLASS = "tippy-box";
   var CONTENT_CLASS = "tippy-content";
   var BACKDROP_CLASS = "tippy-backdrop";
@@ -1693,6 +1962,13 @@ var VueTippy = (function (exports, vueDemi) {
     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);
+  }
   function getValueAtIndexOrReturn(value, index, defaultValue) {
     if (Array.isArray(value)) {
       var v = value[index];
@@ -1808,10 +2084,13 @@ var VueTippy = (function (exports, vueDemi) {
     });
   }
   function getOwnerDocument(elementOrElements) {
+    var _element$ownerDocumen;
+
     var _normalizeToArray = normalizeToArray(elementOrElements),
-        element = _normalizeToArray[0];
+        element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
+
 
-    return element ? element.ownerDocument || document : document;
+    return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
   }
   function isCursorOutsideInteractiveBorder(popperTreeData, event) {
     var clientX = event.clientX,
@@ -1847,6 +2126,26 @@ var VueTippy = (function (exports, vueDemi) {
       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
@@ -1910,8 +2209,63 @@ var VueTippy = (function (exports, vueDemi) {
   }
 
   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-' : ' ';
+    return [method + "() was called on a" + txt + "destroyed instance. This is a no-op but", 'indicates a potential memory leak.'].join(' ');
+  }
+  function clean(value) {
+    var spacesAndTabs = /[ \t]{2,}/g;
+    var lineStartWithSpaces = /^[ \t]*/gm;
+    return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
+  }
+
+  function getDevMessage(message) {
+    return clean("\n  %ctippy.js\n\n  %c" + clean(message) + "\n\n  %c\uD83D\uDC77\u200D This is a development-only message. It will be removed in production.\n  ");
+  }
+
+  function getFormattedMessage(message) {
+    return [getDevMessage(message), // title
+    'color: #00C584; font-size: 1.3em; font-weight: bold;', // message
+    'line-height: 1.5', // footer
+    'color: #a6a095;'];
+  } // Assume warnings and errors never have the same message
+
+  var visitedMessages;
+
+  {
+    resetVisitedMessages();
+  }
+
+  function resetVisitedMessages() {
+    visitedMessages = new Set();
+  }
+  function warnWhen(condition, message) {
+    if (condition && !visitedMessages.has(message)) {
+      var _console;
+
+      visitedMessages.add(message);
+
+      (_console = console).warn.apply(_console, getFormattedMessage(message));
+    }
+  }
+  function errorWhen(condition, message) {
+    if (condition && !visitedMessages.has(message)) {
+      var _console2;
+
+      visitedMessages.add(message);
+
+      (_console2 = console).error.apply(_console2, getFormattedMessage(message));
+    }
+  }
+  function validateTargets(targets) {
+    var didPassFalsyValue = !targets;
+    var didPassPlainObject = Object.prototype.toString.call(targets) === '[object Object]' && !targets.addEventListener;
+    errorWhen(didPassFalsyValue, ['tippy() was passed', '`' + String(targets) + '`', 'as its targets (first) argument. Valid types are: String, Element,', 'Element[], or NodeList.'].join(' '));
+    errorWhen(didPassPlainObject, ['tippy() was passed a plain object which is not supported as an argument', 'for virtual positioning. Use props.getReferenceClientRect instead.'].join(' '));
+  }
 
   var pluginProps = {
     animateFill: false,
@@ -1931,9 +2285,7 @@ var VueTippy = (function (exports, vueDemi) {
     zIndex: 9999
   };
   var defaultProps = Object.assign({
-    appendTo: function appendTo() {
-      return document.body;
-    },
+    appendTo: TIPPY_DEFAULT_APPEND_TO,
     aria: {
       content: 'auto',
       expanded: 'auto'
@@ -1968,9 +2320,13 @@ var VueTippy = (function (exports, vueDemi) {
     touch: true,
     trigger: 'mouseenter focus',
     triggerTarget: null
-  }, pluginProps, {}, renderProps);
+  }, pluginProps, renderProps);
   var defaultKeys = Object.keys(defaultProps);
   var setDefaultProps = function setDefaultProps(partialProps) {
+    /* istanbul ignore else */
+    {
+      validateProps(partialProps, []);
+    }
 
     var keys = Object.keys(partialProps);
     keys.forEach(function (key) {
@@ -1984,12 +2340,14 @@ var VueTippy = (function (exports, vueDemi) {
           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, {
@@ -2020,13 +2378,36 @@ var VueTippy = (function (exports, vueDemi) {
     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
     };
     return out;
   }
+  function validateProps(partialProps, plugins) {
+    if (partialProps === void 0) {
+      partialProps = {};
+    }
+
+    if (plugins === void 0) {
+      plugins = [];
+    }
+
+    var keys = Object.keys(partialProps);
+    keys.forEach(function (prop) {
+      var nonPluginProps = removeProperties(defaultProps, Object.keys(pluginProps));
+      var didPassUnknownProp = !hasOwnProperty(nonPluginProps, prop); // Check if the prop exists in `plugins`
+
+      if (didPassUnknownProp) {
+        didPassUnknownProp = plugins.filter(function (plugin) {
+          return plugin.name === prop;
+        }).length === 0;
+      }
+
+      warnWhen(didPassUnknownProp, ["`" + prop + "`", "is not a valid prop. You may have spelled it incorrectly, or if it's", 'a plugin, forgot to pass it in an array as props.plugins.', '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/'].join(' '));
+    });
+  }
 
   var innerHTML = function innerHTML() {
     return 'innerHTML';
@@ -2158,7 +2539,7 @@ var VueTippy = (function (exports, vueDemi) {
 
   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
     // ===========================================================================
 
@@ -2219,6 +2600,9 @@ var VueTippy = (function (exports, vueDemi) {
     /* istanbul ignore if */
 
     if (!props.render) {
+      {
+        errorWhen(true, 'render() function has not been supplied.');
+      }
 
       return instance;
     } // ===========================================================================
@@ -2255,10 +2639,9 @@ var VueTippy = (function (exports, vueDemi) {
         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; // ===========================================================================
@@ -2278,7 +2661,7 @@ var VueTippy = (function (exports, vueDemi) {
       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() {
@@ -2305,8 +2688,12 @@ var VueTippy = (function (exports, vueDemi) {
       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;
     }
 
@@ -2317,7 +2704,7 @@ var VueTippy = (function (exports, vueDemi) {
 
       pluginsHooks.forEach(function (pluginHooks) {
         if (pluginHooks[hook]) {
-          pluginHooks[hook].apply(void 0, args);
+          pluginHooks[hook].apply(pluginHooks, args);
         }
       });
 
@@ -2383,15 +2770,18 @@ var VueTippy = (function (exports, vueDemi) {
         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;
         }
@@ -2519,7 +2909,7 @@ var VueTippy = (function (exports, vueDemi) {
             break;
 
           case 'focus':
-            on(isIE ? 'focusout' : 'blur', onBlurOrFocusOut);
+            on(isIE11 ? 'focusout' : 'blur', onBlurOrFocusOut);
             break;
 
           case 'focusin':
@@ -2745,7 +3135,7 @@ var VueTippy = (function (exports, vueDemi) {
 
       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]);
@@ -2757,7 +3147,14 @@ var VueTippy = (function (exports, vueDemi) {
         parentNode.appendChild(popper);
       }
 
+      instance.state.isMounted = true;
       createPopperInstance();
+      /* istanbul ignore else */
+
+      {
+        // Accessibility check
+        warnWhen(instance.props.interactive && appendTo === defaultProps.appendTo && node.nextElementSibling !== popper, ['Interactive tippy element may not be accessible via keyboard', 'navigation because it is not directly after the reference element', 'in the DOM source order.', '\n\n', 'Using a wrapper <div> or <span> tag around the reference element', 'solves this by creating a new parentNode context.', '\n\n', 'Specifying `appendTo: document.body` silences this warning, but it', 'assumes you are using a focus management solution to handle', 'keyboard navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity'].join(' '));
+      }
     }
 
     function getNestedPopperTree() {
@@ -2846,6 +3243,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function setProps(partialProps) {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('setProps'));
+      }
 
       if (instance.state.isDestroyed) {
         return;
@@ -2854,7 +3255,7 @@ var VueTippy = (function (exports, vueDemi) {
       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;
@@ -2904,6 +3305,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function show() {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('show'));
+      } // Early bail-out
 
 
       var isAlreadyVisible = instance.state.isVisible;
@@ -2953,6 +3358,8 @@ var VueTippy = (function (exports, vueDemi) {
       }
 
       onFirstUpdate = function onFirstUpdate() {
+        var _instance$popperInsta2;
+
         if (!instance.state.isVisible || ignoreOnFirstUpdate) {
           return;
         }
@@ -2973,8 +3380,10 @@ var VueTippy = (function (exports, vueDemi) {
 
         handleAriaContentAttribute();
         handleAriaExpandedAttribute();
-        pushIfUnique(mountedInstances, instance);
-        instance.state.isMounted = true;
+        pushIfUnique(mountedInstances, instance); // certain modifiers (e.g. `maxSize`) require a second update after the
+        // popper has been positioned for the first time
+
+        (_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
         invokeHook('onMount', [instance]);
 
         if (instance.props.animation && getIsDefaultRenderFn()) {
@@ -2989,6 +3398,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function hide() {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hide'));
+      } // Early bail-out
 
 
       var isAlreadyHidden = !instance.state.isVisible;
@@ -3017,7 +3430,7 @@ var VueTippy = (function (exports, vueDemi) {
 
       cleanupInteractiveMouseListeners();
       removeDocumentPress();
-      handleStyles();
+      handleStyles(true);
 
       if (getIsDefaultRenderFn()) {
         var _getDefaultTemplateCh4 = getDefaultTemplateChildren(),
@@ -3043,6 +3456,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function hideWithInteractivity(event) {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hideWithInteractivity'));
+      }
 
       getDocument().addEventListener('mousemove', debouncedOnMouseMove);
       pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
@@ -3050,6 +3467,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function unmount() {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('unmount'));
+      }
 
       if (instance.state.isVisible) {
         instance.hide();
@@ -3079,6 +3500,10 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     function destroy() {
+      /* istanbul ignore else */
+      {
+        warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('destroy'));
+      }
 
       if (instance.state.isDestroyed) {
         return;
@@ -3099,12 +3524,25 @@ var VueTippy = (function (exports, vueDemi) {
     }
 
     var plugins = defaultProps.plugins.concat(optionalProps.plugins || []);
+    /* istanbul ignore else */
+
+    {
+      validateTargets(targets);
+      validateProps(optionalProps, plugins);
+    }
 
     bindGlobalEventListeners();
     var passedProps = Object.assign({}, optionalProps, {
       plugins: plugins
     });
     var elements = getArrayOfElements(targets);
+    /* istanbul ignore else */
+
+    {
+      var isSingleContentElement = isElement$1(passedProps.content);
+      var isMoreThanOneReferenceElement = elements.length > 1;
+      warnWhen(isSingleContentElement && isMoreThanOneReferenceElement, ['tippy() was passed an Element as the `content` prop, but more than', 'one tippy instance was created by this invocation. This means the', 'content element will only be appended to the last tippy instance.', '\n\n', 'Instead, pass the .innerHTML of the element, or use a function that', 'returns a cloned version of the element instead.', '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)'].join(' '));
+    }
 
     var instances = elements.reduce(function (acc, reference) {
       var instance = reference && createTippy(reference, passedProps);
@@ -3122,16 +3560,63 @@ var VueTippy = (function (exports, vueDemi) {
   tippy.setDefaultProps = setDefaultProps;
   tippy.currentInput = currentInput;
 
+  // every time the popper is destroyed (i.e. a new target), removing the styles
+  // and causing transitions to break for singletons when the console is open, but
+  // most notably for non-transform styles being used, `gpuAcceleration: false`.
+
+  var applyStylesModifier = Object.assign({}, applyStyles$1, {
+    effect: function effect(_ref) {
+      var state = _ref.state;
+      var initialStyles = {
+        popper: {
+          position: state.options.strategy,
+          left: '0',
+          top: '0',
+          margin: '0'
+        },
+        arrow: {
+          position: 'absolute'
+        },
+        reference: {}
+      };
+      Object.assign(state.elements.popper.style, initialStyles.popper);
+      state.styles = initialStyles;
+
+      if (state.elements.arrow) {
+        Object.assign(state.elements.arrow.style, initialStyles.arrow);
+      } // intentionally return no cleanup function
+      // return () => { ... }
+
+    }
+  });
+
   var createSingleton = function createSingleton(tippyInstances, optionalProps) {
+    var _optionalProps$popper;
+
     if (optionalProps === void 0) {
       optionalProps = {};
     }
 
+    /* istanbul ignore else */
+    {
+      errorWhen(!Array.isArray(tippyInstances), ['The first argument passed to createSingleton() must be an array of', 'tippy instances. The passed value was', String(tippyInstances)].join(' '));
+    }
+
     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) {
@@ -3165,42 +3650,123 @@ var VueTippy = (function (exports, vueDemi) {
           instance.setProps = originalSetProps;
         };
       });
+    } // have to pass singleton, as it maybe undefined on first call
+
+
+    function prepareInstance(singleton, target) {
+      var index = triggerTargets.indexOf(target); // bail-out
+
+      if (target === currentTarget) {
+        return;
+      }
+
+      currentTarget = target;
+      var overrideProps = (overrides || []).concat('content').reduce(function (acc, prop) {
+        acc[prop] = individualInstances[index].props[prop];
+        return acc;
+      }, {});
+      singleton.setProps(Object.assign({}, overrideProps, {
+        getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
+          var _references$index;
+
+          return (_references$index = references[index]) == null ? void 0 : _references$index.getBoundingClientRect();
+        }
+      }));
     }
 
     enableInstances(false);
     setReferences();
+    setTriggerTargets();
     var plugin = {
       fn: function fn() {
         return {
           onDestroy: function onDestroy() {
             enableInstances(true);
           },
-          onTrigger: function onTrigger(instance, event) {
-            var target = event.currentTarget;
-            var index = references.indexOf(target); // bail-out
-
-            if (target === currentTarget) {
-              return;
+          onHidden: function onHidden() {
+            currentTarget = null;
+          },
+          onClickOutside: function onClickOutside(instance) {
+            if (instance.props.showOnCreate && !shownOnCreate) {
+              shownOnCreate = true;
+              currentTarget = null;
             }
-
-            currentTarget = target;
-            var overrideProps = (overrides || []).concat('content').reduce(function (acc, prop) {
-              acc[prop] = individualInstances[index].props[prop];
-              return acc;
-            }, {});
-            instance.setProps(Object.assign({}, overrideProps, {
-              getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
-                return target.getBoundingClientRect();
-              }
-            }));
+          },
+          onShow: function onShow(instance) {
+            if (instance.props.showOnCreate && !shownOnCreate) {
+              shownOnCreate = true;
+              prepareInstance(instance, references[0]);
+            }
+          },
+          onTrigger: function onTrigger(instance, event) {
+            prepareInstance(instance, event.currentTarget);
           }
         };
       }
     };
     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])
+      })
     }));
+    var originalShow = singleton.show;
+
+    singleton.show = function (target) {
+      originalShow(); // first time, showOnCreate or programmatic call with no params
+      // default to showing first instance
+
+      if (!currentTarget && target == null) {
+        return prepareInstance(singleton, references[0]);
+      } // triggered from event (do nothing as prepareInstance already called by onTrigger)
+      // programmatic call with no params when already visible (do nothing again)
+
+
+      if (currentTarget && target == null) {
+        return;
+      } // target is index of instance
+
+
+      if (typeof target === 'number') {
+        return references[target] && prepareInstance(singleton, references[target]);
+      } // target is a child tippy instance
+
+
+      if (individualInstances.indexOf(target) >= 0) {
+        var ref = target.reference;
+        return prepareInstance(singleton, ref);
+      } // target is a ReferenceElement
+
+
+      if (references.indexOf(target) >= 0) {
+        return prepareInstance(singleton, target);
+      }
+    };
+
+    singleton.showNext = function () {
+      var first = references[0];
+
+      if (!currentTarget) {
+        return singleton.show(0);
+      }
+
+      var index = references.indexOf(currentTarget);
+      singleton.show(references[index + 1] || first);
+    };
+
+    singleton.showPrevious = function () {
+      var last = references[references.length - 1];
+
+      if (!currentTarget) {
+        return singleton.show(last);
+      }
+
+      var index = references.indexOf(currentTarget);
+      var target = references[index - 1] || last;
+      singleton.show(target);
+    };
+
     var originalSetProps = singleton.setProps;
 
     singleton.setProps = function (props) {
@@ -3216,9 +3782,10 @@ var VueTippy = (function (exports, vueDemi) {
       individualInstances = nextInstances;
       enableInstances(false);
       setReferences();
-      interceptSetProps(singleton);
+      setTriggerTargets();
+      interceptSetPropsCleanups = interceptSetProps(singleton);
       singleton.setProps({
-        triggerTarget: references
+        triggerTarget: triggerTargets
       });
     };
 
@@ -3233,7 +3800,10 @@ var VueTippy = (function (exports, vueDemi) {
       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)) {
+        {
+          errorWhen(instance.props.animateFill, 'The `animateFill` plugin requires the default render function.');
+        }
 
         return {};
       }
@@ -3355,6 +3925,7 @@ var VueTippy = (function (exports, vueDemi) {
 
         if (isCursorOverReference || !instance.props.interactive) {
           instance.setProps({
+            // @ts-ignore - unneeded DOMRect properties
             getReferenceClientRect: function getReferenceClientRect() {
               var rect = reference.getBoundingClientRect();
               var x = clientX;
@@ -3491,6 +4062,7 @@ var VueTippy = (function (exports, vueDemi) {
       var placement;
       var cursorRectIndex = -1;
       var isInternalUpdate = false;
+      var triedPlacements = [];
       var modifier = {
         name: 'tippyInlinePositioning',
         enabled: true,
@@ -3499,8 +4071,14 @@ var VueTippy = (function (exports, vueDemi) {
           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);
                 }
@@ -3537,10 +4115,11 @@ var VueTippy = (function (exports, vueDemi) {
             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;
         }
       };
@@ -3684,51 +4263,103 @@ var VueTippy = (function (exports, vueDemi) {
       },
   });
   function useTippy(el, opts = {}, settings = { mount: true }) {
-      const instance = vueDemi.ref();
+      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)
               return container;
-          container = document.createElement('fragment');
+          container = document.createDocumentFragment();
           return container;
       };
       const getContent = (content) => {
           let newContent;
-          let unwrappedContent = vueDemi.isRef(content)
+          let unwrappedContent = vue.isRef(content)
               ? content.value
               : content;
-          if (vueDemi.isVue2) {
-              //@ts-ignore
-              newContent = unwrappedContent;
-          }
-          else {
-              if (vueDemi.isVNode(unwrappedContent)) {
-                  vueDemi.render(unwrappedContent, getContainer());
-                  newContent = () => getContainer();
-              }
-              else if (typeof unwrappedContent === 'object') {
-                  vueDemi.render(vueDemi.h(unwrappedContent), getContainer());
-                  newContent = () => getContainer();
+          if (vue.isVNode(unwrappedContent)) {
+              if (vm) {
+                  unwrappedContent.appContext = vm.appContext;
               }
-              else {
-                  newContent = unwrappedContent;
+              vue.render(unwrappedContent, getContainer());
+              newContent = () => getContainer();
+          }
+          else if (typeof unwrappedContent === 'object') {
+              let comp = vue.h(unwrappedContent);
+              if (vm) {
+                  comp.appContext = vm.appContext;
               }
+              vue.render(comp, getContainer());
+              newContent = () => getContainer();
+          }
+          else {
+              newContent = unwrappedContent;
           }
           return newContent;
       };
       const getProps = (opts) => {
           let options = {};
-          if (vueDemi.isRef(opts)) {
-              options = opts.value;
+          if (vue.isRef(opts)) {
+              options = opts.value || {};
           }
-          else if (vueDemi.isReactive(opts)) {
+          else if (vue.isReactive(opts)) {
               options = { ...opts };
           }
           else {
               options = { ...opts };
           }
-          if (options.content)
+          if (options.content) {
               options.content = getContent(options.content);
+          }
+          if (options.triggerTarget) {
+              options.triggerTarget = vue.isRef(options.triggerTarget)
+                  ? options.triggerTarget.value
+                  : options.triggerTarget;
+          }
+          if (!options.plugins || !Array.isArray(options.plugins)) {
+              options.plugins = [];
+          }
+          options.plugins = options.plugins.filter((plugin) => plugin.name !== 'vueTippyReactiveState');
+          options.plugins.push({
+              name: 'vueTippyReactiveState',
+              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 = () => {
@@ -3767,10 +4398,12 @@ var VueTippy = (function (exports, vueDemi) {
       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;
@@ -3779,7 +4412,7 @@ var VueTippy = (function (exports, vueDemi) {
       const mount = () => {
           if (!el)
               return;
-          let target = vueDemi.isRef(el) ? el.value : el;
+          let target = vue.isRef(el) ? el.value : el;
           if (typeof target === 'function')
               target = target();
           if (target) {
@@ -3801,17 +4434,17 @@ var VueTippy = (function (exports, vueDemi) {
           enable,
           unmount,
           mount,
+          state,
       };
       if (settings.mount) {
-          const vm = vueDemi.getCurrentInstance();
           if (vm) {
               if (vm.isMounted) {
                   mount();
               }
               else {
-                  vueDemi.onMounted(mount);
+                  vue.onMounted(mount);
               }
-              vueDemi.onUnmounted(() => {
+              vue.onUnmounted(() => {
                   destroy();
               });
           }
@@ -3819,21 +4452,179 @@ var VueTippy = (function (exports, vueDemi) {
               mount();
           }
       }
-      if (vueDemi.isRef(opts) || vueDemi.isReactive(opts)) {
-          vueDemi.watch(opts, refresh, { immediate: false });
+      if (vue.isRef(opts) || vue.isReactive(opts)) {
+          vue.watch(opts, refresh, { immediate: false });
       }
-      else if (vueDemi.isRef(opts.content)) {
-          vueDemi.watch(opts.content, refreshContent, { immediate: false });
+      else if (vue.isRef(opts.content)) {
+          vue.watch(opts.content, refreshContent, { immediate: false });
       }
       return response;
   }
 
-  // const pluginProps = [
-  //   'animateFill',
-  //   'followCursor',
-  //   'inlinePositioning',
-  //   'sticky',
-  // ]
+  function useTippyComponent(opts = {}, children) {
+      const instance = vue.ref();
+      return {
+          instance,
+          TippyComponent: vue.h(TippyComponent, {
+              ...opts,
+              onVnodeMounted: (vnode) => {
+                  //@ts-ignore
+                  instance.value = vnode.component.ctx;
+              },
+          }, children),
+      };
+  }
+
+  function useSingleton(instances, optionalProps) {
+      const singleton = vue.ref();
+      vue.onMounted(() => {
+          const pendingTippyInstances = Array.isArray(instances)
+              ? instances.map(i => i.value)
+              : typeof instances === 'function'
+                  ? instances()
+                  : instances.value;
+          const tippyInstances = pendingTippyInstances
+              .map((instance) => {
+              if (instance instanceof Element) {
+                  //@ts-ignore
+                  return instance._tippy;
+              }
+              return instance;
+          })
+              .filter(Boolean);
+          singleton.value = createSingleton(tippyInstances, optionalProps
+              ? { allowHTML: true, ...optionalProps }
+              : { allowHTML: true });
+      });
+      return {
+          singleton,
+      };
+  }
+
+  const TippyComponent = vue.defineComponent({
+      props: {
+          to: {
+              type: [String, Function],
+          },
+          tag: {
+              type: String,
+              default: 'span'
+          },
+          contentTag: {
+              type: String,
+              default: 'span'
+          },
+          contentClass: {
+              type: String,
+              default: null
+          },
+          appendTo: { default: () => tippy.defaultProps['appendTo'] },
+          aria: { default: () => tippy.defaultProps['aria'] },
+          delay: { default: () => tippy.defaultProps['delay'] },
+          duration: { default: () => tippy.defaultProps['duration'] },
+          getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
+          hideOnClick: { type: [Boolean, String], default: () => tippy.defaultProps['hideOnClick'] },
+          ignoreAttributes: { type: Boolean, default: () => tippy.defaultProps['ignoreAttributes'] },
+          interactive: { type: Boolean, default: () => tippy.defaultProps['interactive'] },
+          interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
+          interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
+          moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
+          offset: { default: () => tippy.defaultProps['offset'] },
+          onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
+          onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
+          onCreate: { default: () => tippy.defaultProps['onCreate'] },
+          onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
+          onHidden: { default: () => tippy.defaultProps['onHidden'] },
+          onHide: { default: () => tippy.defaultProps['onHide'] },
+          onMount: { default: () => tippy.defaultProps['onMount'] },
+          onShow: { default: () => tippy.defaultProps['onShow'] },
+          onShown: { default: () => tippy.defaultProps['onShown'] },
+          onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
+          onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
+          onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
+          placement: { default: () => tippy.defaultProps['placement'] },
+          plugins: { default: () => tippy.defaultProps['plugins'] },
+          popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
+          render: { default: () => tippy.defaultProps['render'] },
+          showOnCreate: { type: Boolean, default: () => tippy.defaultProps['showOnCreate'] },
+          touch: { type: [Boolean, String, Array], default: () => tippy.defaultProps['touch'] },
+          trigger: { default: () => tippy.defaultProps['trigger'] },
+          triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
+          animateFill: { type: Boolean, default: () => tippy.defaultProps['animateFill'] },
+          followCursor: { type: [Boolean, String], default: () => tippy.defaultProps['followCursor'] },
+          inlinePositioning: { type: Boolean, default: () => tippy.defaultProps['inlinePositioning'] },
+          sticky: { type: [Boolean, String], default: () => tippy.defaultProps['sticky'] },
+          allowHTML: { type: Boolean, default: () => tippy.defaultProps['allowHTML'] },
+          animation: { default: () => tippy.defaultProps['animation'] },
+          arrow: { default: () => tippy.defaultProps['arrow'] },
+          content: { default: () => tippy.defaultProps['content'] },
+          inertia: { default: () => tippy.defaultProps['inertia'] },
+          maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
+          role: { default: () => tippy.defaultProps['role'] },
+          theme: { default: () => tippy.defaultProps['theme'] },
+          zIndex: { default: () => tippy.defaultProps['zIndex'] }
+      },
+      emits: ['state'],
+      setup(props, { slots, emit, expose }) {
+          const elem = vue.ref();
+          const contentElem = vue.ref();
+          const mounted = vue.ref(false);
+          const getOptions = () => {
+              let options = { ...props };
+              for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
+                  if (options.hasOwnProperty(prop)) {
+                      // @ts-ignore
+                      delete options[prop];
+                  }
+              }
+              return options;
+          };
+          let target = elem;
+          if (props.to) {
+              if (typeof Element !== 'undefined' && props.to instanceof Element) {
+                  target = () => props.to;
+              }
+              else if (typeof props.to === 'string' || props.to instanceof String) {
+                  target = () => document.querySelector(props.to);
+              }
+          }
+          const tippy = useTippy(target, getOptions());
+          vue.onMounted(() => {
+              mounted.value = true;
+              vue.nextTick(() => {
+                  if (slots.content)
+                      tippy.setContent(() => contentElem.value);
+              });
+          });
+          vue.watch(tippy.state, () => {
+              emit('state', vue.unref(tippy.state));
+          }, { immediate: true, deep: true });
+          vue.watch(() => props, () => {
+              tippy.setProps(getOptions());
+              if (slots.content)
+                  tippy.setContent(() => contentElem.value);
+          }, { deep: true });
+          let exposed = vue.reactive({
+              elem,
+              contentElem,
+              mounted,
+              ...tippy
+          });
+          expose(exposed);
+          return () => {
+              const slot = slots.default ? slots.default(exposed) : [];
+              return vue.h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
+                  slot,
+                  vue.h(props.contentTag, {
+                      ref: contentElem,
+                      style: { display: mounted.value ? 'inherit' : 'none' },
+                      class: props.contentClass
+                  }, slots.content(exposed)),
+              ] : slot);
+          };
+      },
+  });
+
   const booleanProps = [
       'a11y',
       'allowHTML',
@@ -3868,22 +4659,40 @@ var VueTippy = (function (exports, vueDemi) {
           };
       }
   });
-  const TippyComponent = vueDemi.defineComponent({
+  const TippySingleton = vue.defineComponent({
       props,
       setup(props) {
-          const elem = vueDemi.ref();
-          const tippy = useTippy(elem, props);
-          return { elem, ...tippy };
+          const instances = vue.ref([]);
+          const { singleton } = useSingleton(instances, props);
+          return { instances, singleton };
+      },
+      mounted() {
+          var _a;
+          const parent = this.$el.parentElement;
+          const elements = parent.querySelectorAll('[data-v-tippy]');
+          this.instances = Array.from(elements)
+              .map((el) => el._tippy)
+              .filter(Boolean);
+          (_a = this.singleton) === null || _a === void 0 ? void 0 : _a.setInstances(this.instances);
       },
       render() {
           let slot = this.$slots.default ? this.$slots.default() : [];
-          return vueDemi.h('span', { ref: 'elem' }, slot);
+          return vue.h(() => slot);
       },
   });
 
   const directive = {
       mounted(el, binding, vnode) {
-          const opts = binding.value || {};
+          const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
+          const modifiers = Object.keys(binding.modifiers || {});
+          const placement = modifiers.find(modifier => modifier !== 'arrow');
+          const withArrow = modifiers.findIndex(modifier => modifier === 'arrow') !== -1;
+          if (placement) {
+              opts.placement = opts.placement || placement;
+          }
+          if (withArrow) {
+              opts.arrow = opts.arrow !== undefined ? opts.arrow : true;
+          }
           if (vnode.props && vnode.props.onTippyShow) {
               opts.onShow = function (...args) {
                   var _a;
@@ -3932,7 +4741,7 @@ var VueTippy = (function (exports, vueDemi) {
           }
       },
       updated(el, binding) {
-          const opts = binding.value || {};
+          const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
           if (el.getAttribute('title') && !opts.content) {
               opts.content = el.getAttribute('title');
               el.removeAttribute('title');
@@ -3954,76 +4763,30 @@ var VueTippy = (function (exports, vueDemi) {
           tippy.setDefaultProps(options.defaultProps || {});
           app.directive(options.directive || 'tippy', directive);
           app.component(options.component || 'tippy', TippyComponent);
+          app.component(options.componentSingleton || 'tippy-singleton', TippySingleton);
       },
   };
 
-  function useSingleton(instances, optionalProps) {
-      const singleton = vueDemi.ref();
-      vueDemi.onMounted(() => {
-          const pendingTippyInstances = Array.isArray(instances)
-              ? instances.map(i => i.value)
-              : instances.value;
-          const tippyInstances = pendingTippyInstances
-              .map((instance) => {
-              if (instance instanceof Element) {
-                  //@ts-ignore
-                  return instance._tippy;
-              }
-              return instance;
-          })
-              .filter(Boolean);
-          singleton.value = createSingleton(tippyInstances, optionalProps);
-      });
-      return {
-          singleton,
-      };
-  }
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-  styleInject(css_248z);
-
   const setDefaultProps$1 = tippy.setDefaultProps;
   setDefaultProps$1({
+      ignoreAttributes: true,
       plugins: [sticky, inlinePositioning, followCursor, animateFill],
   });
 
   exports.Tippy = TippyComponent;
+  exports.TippySingleton = TippySingleton;
   exports.default = plugin;
   exports.directive = directive;
+  exports.plugin = plugin;
+  exports.roundArrow = ROUND_ARROW;
   exports.setDefaultProps = setDefaultProps$1;
   exports.tippy = tippy;
   exports.useSingleton = useSingleton;
   exports.useTippy = useTippy;
+  exports.useTippyComponent = useTippyComponent;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
   return exports;
 
-}({}, VueDemi));
+}({}, Vue));