vue-tippy 6.0.0-alpha.3 → 6.0.0-alpha.33

package/dist/vue-tippy.global.js

@@ -1,6 +1,6 @@
 /*!
-  * vue-tippy v6.0.0-alpha.1
-  * (c) 2020 Georges KABBOUCHI
+  * vue-tippy v6.0.0-alpha.32
+  * (c) 2021 Georges KABBOUCHI
   * @license MIT
   */
 var VueTippy = (function (exports, vue) {
@@ -42,10 +42,11 @@ var VueTippy = (function (exports, vue) {
     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, vue) {
     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;
   }
@@ -91,7 +88,7 @@ var VueTippy = (function (exports, vue) {
         return;
       } // Flow doesn't support to extend this property, but it's the most
       // effective way to apply styles to an HTMLElement
-      // $FlowFixMe
+      // $FlowFixMe[cannot-write]
 
 
       Object.assign(element.style, style);
@@ -122,6 +119,7 @@ var VueTippy = (function (exports, vue) {
       reference: {}
     };
     Object.assign(state.elements.popper.style, initialStyles.popper);
+    state.styles = initialStyles;
 
     if (state.elements.arrow) {
       Object.assign(state.elements.arrow.style, initialStyles.arrow);
@@ -140,10 +138,7 @@ var VueTippy = (function (exports, vue) {
 
         if (!isHTMLElement(element) || !getNodeName(element)) {
           return;
-        } // Flow doesn't support to extend this property, but it's the most
-        // effective way to apply styles to an HTMLElement
-        // $FlowFixMe
-
+        }
 
         Object.assign(element.style, style);
         Object.keys(attributes).forEach(function (attribute) {
@@ -167,14 +162,42 @@ var VueTippy = (function (exports, vue) {
     return placement.split('-')[0];
   }
 
-  // Returns the layout rect of an element relative to its offsetParent. Layout
+  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
+    };
+  }
+
   // 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
     };
   }
 
@@ -190,7 +213,7 @@ var VueTippy = (function (exports, vue) {
         do {
           if (next && parent.isSameNode(next)) {
             return true;
-          } // $FlowFixMe: need a better way to handle this...
+          } // $FlowFixMe[prop-missing]: need a better way to handle this...
 
 
           next = next.parentNode || next.host;
@@ -210,8 +233,9 @@ var VueTippy = (function (exports, vue) {
   }
 
   function getDocumentElement(element) {
-    // $FlowFixMe: assume body is always available
-    return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+    element.document) || window.document).documentElement;
   }
 
   function getParentNode(element) {
@@ -219,12 +243,13 @@ var VueTippy = (function (exports, vue) {
       return element;
     }
 
-    return (// $FlowFixMe: this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+      // $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: need a better way to handle this...
-      element.host || // ShadowRoot detected
-      // $FlowFixMe: HTMLElement is a Node
+      element.parentNode || ( // DOM Element detected
+      isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+      // $FlowFixMe[incompatible-call]: HTMLElement is a Node
       getDocumentElement(element) // fallback
 
     );
@@ -236,29 +261,32 @@ var VueTippy = (function (exports, vue) {
       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 +306,7 @@ var VueTippy = (function (exports, vue) {
       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 +317,12 @@ var VueTippy = (function (exports, vue) {
     return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
   }
 
-  function within(min, value, max) {
-    return Math.max(min, Math.min(value, max));
+  var max = Math.max;
+  var min = Math.min;
+  var round = Math.round;
+
+  function within(min$1, value, max$1) {
+    return max(min$1, min(value, max$1));
   }
 
   function getFreshSideObject() {
@@ -303,7 +335,7 @@ var VueTippy = (function (exports, vue) {
   }
 
   function mergePaddingObject(paddingObject) {
-    return Object.assign(Object.assign({}, getFreshSideObject()), paddingObject);
+    return Object.assign({}, getFreshSideObject(), paddingObject);
   }
 
   function expandToHashMap(value, keys) {
@@ -313,11 +345,19 @@ var VueTippy = (function (exports, vue) {
     }, {});
   }
 
+  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 +369,7 @@ var VueTippy = (function (exports, vue) {
       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 +391,9 @@ var VueTippy = (function (exports, vue) {
 
   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;
@@ -377,9 +414,6 @@ var VueTippy = (function (exports, vue) {
     }
 
     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
 
 
@@ -402,14 +436,14 @@ var VueTippy = (function (exports, vue) {
   // Zooming can change the DPR, but it seems to report a value that will
   // cleanly divide the values into the appropriate subpixels.
 
-  function roundOffsets(_ref) {
+  function roundOffsetsByDPR(_ref) {
     var x = _ref.x,
         y = _ref.y;
     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(round(x * dpr) / dpr) || 0,
+      y: round(round(y * dpr) / dpr) || 0
     };
   }
 
@@ -422,11 +456,14 @@ var VueTippy = (function (exports, vue) {
         offsets = _ref2.offsets,
         position = _ref2.position,
         gpuAcceleration = _ref2.gpuAcceleration,
-        adaptive = _ref2.adaptive;
+        adaptive = _ref2.adaptive,
+        roundOffsets = _ref2.roundOffsets;
 
-    var _roundOffsets = roundOffsets(offsets),
-        x = _roundOffsets.x,
-        y = _roundOffsets.y;
+    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,
+        y = _ref3$y === void 0 ? 0 : _ref3$y;
 
     var hasX = offsets.hasOwnProperty('x');
     var hasY = offsets.hasOwnProperty('y');
@@ -436,23 +473,32 @@ var VueTippy = (function (exports, vue) {
 
     if (adaptive) {
       var offsetParent = getOffsetParent(popper);
+      var heightProp = 'clientHeight';
+      var widthProp = 'clientWidth';
 
       if (offsetParent === getWindow(popper)) {
         offsetParent = getDocumentElement(popper);
-      } // $FlowFixMe: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
 
-      /*:: offsetParent = (offsetParent: Element); */
+        if (getComputedStyle(offsetParent).position !== 'static') {
+          heightProp = 'scrollHeight';
+          widthProp = 'scrollWidth';
+        }
+      } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
+
 
+      offsetParent = offsetParent;
 
       if (placement === top) {
-        sideY = bottom;
-        y -= offsetParent.clientHeight - popperRect.height;
+        sideY = bottom; // $FlowFixMe[prop-missing]
+
+        y -= offsetParent[heightProp] - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
       }
 
       if (placement === left) {
-        sideX = right;
-        x -= offsetParent.clientWidth - popperRect.width;
+        sideX = right; // $FlowFixMe[prop-missing]
+
+        x -= offsetParent[widthProp] - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
       }
     }
@@ -464,19 +510,21 @@ var VueTippy = (function (exports, vue) {
     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) < 2 ? "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(_ref3) {
-    var state = _ref3.state,
-        options = _ref3.options;
+  function computeStyles(_ref4) {
+    var state = _ref4.state,
+        options = _ref4.options;
     var _options$gpuAccelerat = options.gpuAcceleration,
         gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
         _options$adaptive = options.adaptive,
-        adaptive = _options$adaptive === void 0 ? true : _options$adaptive;
+        adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
+        _options$roundOffsets = options.roundOffsets,
+        roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
 
     var commonStyles = {
       placement: getBasePlacement(state.placement),
@@ -486,22 +534,24 @@ var VueTippy = (function (exports, vue) {
     };
 
     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
+        adaptive: adaptive,
+        roundOffsets: roundOffsets
       })));
     }
 
     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
+        adaptive: false,
+        roundOffsets: roundOffsets
       })));
     }
 
-    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
@@ -585,20 +635,6 @@ var VueTippy = (function (exports, vue) {
     });
   }
 
-  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;
@@ -661,16 +697,18 @@ var VueTippy = (function (exports, vue) {
   // 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 {
@@ -693,7 +731,7 @@ var VueTippy = (function (exports, vue) {
 
   function getScrollParent(node) {
     if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
-      // $FlowFixMe: assume body is always available
+      // $FlowFixMe[incompatible-return]: assume body is always available
       return node.ownerDocument.body;
     }
 
@@ -707,26 +745,28 @@ var VueTippy = (function (exports, vue) {
   /*
   given a DOM element, return the list of all scroll parents, up the list of ancesors
   until we get to the top window object. This list is what we attach scroll listeners
-  to, because if any of these parent elements scroll, we'll need to re-calculate the 
+  to, because if any of these parent elements scroll, we'll need to re-calculate the
   reference element's position.
   */
 
   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);
-    return isBody ? updatedList : // $FlowFixMe: isBody tells us target will be an HTMLElement here
+    return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
     updatedList.concat(listScrollParents(getParentNode(target)));
   }
 
   function rectToClientRect(rect) {
-    return Object.assign(Object.assign({}, rect), {}, {
+    return Object.assign({}, rect, {
       left: rect.x,
       top: rect.y,
       right: rect.x + rect.width,
@@ -761,7 +801,7 @@ var VueTippy = (function (exports, vue) {
 
     if (!isElement(clipperElement)) {
       return [];
-    } // $FlowFixMe: https://github.com/facebook/flow/issues/1414
+    } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
 
 
     return clippingParents.filter(function (clippingParent) {
@@ -777,10 +817,10 @@ var VueTippy = (function (exports, vue) {
     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;
@@ -847,11 +887,11 @@ var VueTippy = (function (exports, vue) {
 
       switch (variation) {
         case start:
-          offsets[mainAxis] = Math.floor(offsets[mainAxis]) - Math.floor(reference[len] / 2 - element[len] / 2);
+          offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
           break;
 
         case end:
-          offsets[mainAxis] = Math.floor(offsets[mainAxis]) + Math.ceil(reference[len] / 2 - element[len] / 2);
+          offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
           break;
       }
     }
@@ -890,7 +930,7 @@ var VueTippy = (function (exports, vue) {
       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
 
@@ -914,9 +954,6 @@ var VueTippy = (function (exports, vue) {
     return overflowOffsets;
   }
 
-  /*:: type OverflowsMap = { [ComputedPlacement]: number }; */
-
-  /*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
   function computeAutoPlacement(state, options) {
     if (options === void 0) {
       options = {};
@@ -933,15 +970,14 @@ var VueTippy = (function (exports, vue) {
     var variation = getVariation(placement);
     var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
       return getVariation(placement) === variation;
-    }) : basePlacements; // $FlowFixMe
-
+    }) : basePlacements;
     var allowedPlacements = placements$1.filter(function (placement) {
       return allowedAutoPlacements.indexOf(placement) >= 0;
     });
 
     if (allowedPlacements.length === 0) {
       allowedPlacements = placements$1;
-    } // $FlowFixMe: Flow seems to have problems with two array unions...
+    } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
     var overflows = allowedPlacements.reduce(function (acc, placement) {
@@ -1142,7 +1178,7 @@ var VueTippy = (function (exports, vue) {
       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
     });
@@ -1161,7 +1197,7 @@ var VueTippy = (function (exports, vue) {
     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],
@@ -1267,7 +1303,7 @@ var VueTippy = (function (exports, vue) {
     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 data = {
@@ -1279,13 +1315,13 @@ var VueTippy = (function (exports, vue) {
       return;
     }
 
-    if (checkMainAxis) {
+    if (checkMainAxis || checkAltAxis) {
       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 = popperOffsets[mainAxis] + overflow[mainSide];
+      var max$1 = popperOffsets[mainAxis] - 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
@@ -1312,26 +1348,29 @@ var VueTippy = (function (exports, vue) {
       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);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+      if (checkMainAxis) {
+        var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+        popperOffsets[mainAxis] = preventedOffset;
+        data[mainAxis] = preventedOffset - offset;
+      }
+
+      if (checkAltAxis) {
+        var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+        var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+        var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+        var _min = _offset + overflow[_mainSide];
 
-      var _max = _offset - overflow[_altSide];
+        var _max = _offset - overflow[_altSide];
 
-      var _preventedOffset = within(_min, _offset, _max);
+        var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
+        popperOffsets[altAxis] = _preventedOffset;
+        data[altAxis] = _preventedOffset - _offset;
+      }
     }
 
     state.modifiersData[name] = data;
@@ -1465,9 +1504,9 @@ var VueTippy = (function (exports, vue) {
   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
@@ -1511,7 +1550,7 @@ var VueTippy = (function (exports, vue) {
       var state = {
         placement: 'bottom',
         orderedModifiers: [],
-        options: Object.assign(Object.assign({}, DEFAULT_OPTIONS), defaultOptions),
+        options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
         modifiersData: {},
         elements: {
           reference: reference,
@@ -1526,7 +1565,7 @@ var VueTippy = (function (exports, vue) {
         state: state,
         setOptions: function setOptions(options) {
           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)
@@ -1674,10 +1713,12 @@ var VueTippy = (function (exports, vue) {
   }); // eslint-disable-next-line import/no-unused-modules
 
   /**!
-  * tippy.js v6.2.7
-  * (c) 2017-2020 atomiks
+  * tippy.js v6.3.1
+  * (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";
@@ -1802,10 +1843,13 @@ var VueTippy = (function (exports, vue) {
     });
   }
   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 ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
   }
   function isCursorOutsideInteractiveBorder(popperTreeData, event) {
     var clientX = event.clientX,
@@ -2947,6 +2991,8 @@ var VueTippy = (function (exports, vue) {
       }
 
       onFirstUpdate = function onFirstUpdate() {
+        var _instance$popperInsta2;
+
         if (!instance.state.isVisible || ignoreOnFirstUpdate) {
           return;
         }
@@ -2967,7 +3013,10 @@ var VueTippy = (function (exports, vue) {
 
         handleAriaContentAttribute();
         handleAriaExpandedAttribute();
-        pushIfUnique(mountedInstances, instance);
+        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();
         instance.state.isMounted = true;
         invokeHook('onMount', [instance]);
 
@@ -3116,7 +3165,39 @@ var VueTippy = (function (exports, vue) {
   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 = {};
     }
@@ -3126,6 +3207,7 @@ var VueTippy = (function (exports, vue) {
     var currentTarget;
     var overrides = optionalProps.overrides;
     var interceptSetPropsCleanups = [];
+    var shownOnCreate = false;
 
     function setReferences() {
       references = individualInstances.map(function (instance) {
@@ -3159,6 +3241,26 @@ var VueTippy = (function (exports, vue) {
           instance.setProps = originalSetProps;
         };
       });
+    } // have to pass singleton, as it maybe undefined on first call
+
+
+    function prepareInstance(singleton, target) {
+      var index = references.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 () {
+          return target.getBoundingClientRect();
+        }
+      }));
     }
 
     enableInstances(false);
@@ -3169,32 +3271,90 @@ var VueTippy = (function (exports, vue) {
           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: references,
+      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.includes(target)) {
+        var ref = target.reference;
+        return prepareInstance(singleton, ref);
+      } // target is a ReferenceElement
+
+
+      if (references.includes(target)) {
+        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) {
@@ -3678,6 +3838,7 @@ var VueTippy = (function (exports, vue) {
       },
   });
   function useTippy(el, opts = {}, settings = { mount: true }) {
+      const vm = vue.getCurrentInstance();
       const instance = vue.ref();
       let container = null;
       const getContainer = () => {
@@ -3692,11 +3853,18 @@ var VueTippy = (function (exports, vue) {
               ? content.value
               : content;
           if (vue.isVNode(unwrappedContent)) {
+              if (vm) {
+                  unwrappedContent.appContext = vm.appContext;
+              }
               vue.render(unwrappedContent, getContainer());
               newContent = () => getContainer();
           }
           else if (typeof unwrappedContent === 'object') {
-              vue.render(vue.h(unwrappedContent), getContainer());
+              let comp = vue.h(unwrappedContent);
+              if (vm) {
+                  comp.appContext = vm.appContext;
+              }
+              vue.render(comp, getContainer());
               newContent = () => getContainer();
           }
           else {
@@ -3715,8 +3883,14 @@ var VueTippy = (function (exports, vue) {
           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;
+          }
           return options;
       };
       const refresh = () => {
@@ -3791,7 +3965,6 @@ var VueTippy = (function (exports, vue) {
           mount,
       };
       if (settings.mount) {
-          const vm = vue.getCurrentInstance();
           if (vm) {
               if (vm.isMounted) {
                   mount();
@@ -3816,6 +3989,46 @@ var VueTippy = (function (exports, vue) {
       return response;
   }
 
+  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 pluginProps = [
   //   'animateFill',
   //   'followCursor',
@@ -3856,50 +4069,137 @@ var VueTippy = (function (exports, vue) {
           };
       }
   });
+  props['to'] = {};
+  props['tag'] = {
+      default: 'span'
+  };
+  props['contentTag'] = {
+      default: 'span'
+  };
+  props['contentClass'] = {
+      default: null
+  };
   const TippyComponent = vue.defineComponent({
       props,
-      setup(props) {
+      setup(props, { slots }) {
           const elem = vue.ref();
-          const tippy = useTippy(elem, props);
-          return { elem, ...tippy };
+          const contentElem = vue.ref();
+          let options = props;
+          if (options.to) {
+              delete options.to;
+          }
+          let target = elem;
+          if (props.to) {
+              if (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, options);
+          vue.onMounted(() => {
+              if (slots.content)
+                  tippy.setContent(() => contentElem.value);
+          });
+          return { elem, contentElem, ...tippy };
+      },
+      render() {
+          let slot = this.$slots.default ? this.$slots.default(this) : [];
+          return vue.h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
+              slot,
+              vue.h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
+          ] : slot);
+      },
+  });
+
+  const booleanProps$1 = [
+      'a11y',
+      'allowHTML',
+      'arrow',
+      'flip',
+      'flipOnUpdate',
+      'hideOnClick',
+      'ignoreAttributes',
+      'inertia',
+      'interactive',
+      'lazy',
+      'multiple',
+      'showOnInit',
+      'touch',
+      'touchHold',
+  ];
+  let props$1 = {};
+  Object.keys(tippy.defaultProps).forEach((prop) => {
+      if (booleanProps$1.includes(prop)) {
+          props$1[prop] = {
+              type: Boolean,
+              default: function () {
+                  return tippy.defaultProps[prop];
+              },
+          };
+      }
+      else {
+          props$1[prop] = {
+              default: function () {
+                  return tippy.defaultProps[prop];
+              },
+          };
+      }
+  });
+  const TippySingleton = vue.defineComponent({
+      props: props$1,
+      setup(props) {
+          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 vue.h('span', { ref: 'elem' }, slot);
+          return vue.h(() => slot);
       },
   });
 
   const directive = {
       mounted(el, binding, vnode) {
-          const opts = binding.value || {};
-          if (vnode.props && vnode.props.onShow) {
+          const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {};
+          if (vnode.props && vnode.props.onTippyShow) {
               opts.onShow = function (...args) {
                   var _a;
-                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onShow(...args);
+                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShow(...args);
               };
           }
-          if (vnode.props && vnode.props.onShown) {
+          if (vnode.props && vnode.props.onTippyShown) {
               opts.onShown = function (...args) {
                   var _a;
-                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onShown(...args);
+                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyShown(...args);
               };
           }
-          if (vnode.props && vnode.props.onHidden) {
+          if (vnode.props && vnode.props.onTippyHidden) {
               opts.onHidden = function (...args) {
                   var _a;
-                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onHidden(...args);
+                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHidden(...args);
               };
           }
-          if (vnode.props && vnode.props.onHide) {
+          if (vnode.props && vnode.props.onTippyHide) {
               opts.onHide = function (...args) {
                   var _a;
-                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onHide(...args);
+                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyHide(...args);
               };
           }
-          if (vnode.props && vnode.props.onMount) {
+          if (vnode.props && vnode.props.onTippyMount) {
               opts.onMount = function (...args) {
                   var _a;
-                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onMount(...args);
+                  return (_a = vnode.props) === null || _a === void 0 ? void 0 : _a.onTippyMount(...args);
               };
           }
           if (el.getAttribute('title') && !opts.content) {
@@ -3920,7 +4220,7 @@ var VueTippy = (function (exports, vue) {
           }
       },
       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');
@@ -3942,61 +4242,27 @@ var VueTippy = (function (exports, vue) {
           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 = vue.ref();
-      vue.onMounted(() => {
-          singleton.value = createSingleton(instances.map(instance => instance.value), 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 });