@nmorph/nmorph-ui-kit 3.0.4 → 3.0.6

package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphGuide.css';
-import { defineComponent as P, ref as C, computed as a, watch as j, provide as z } from "vue";
-import { nmorphGuideInjectionKey as A } from "./types.js";
-const G = /* @__PURE__ */ P({
+import { defineComponent as j, ref as C, computed as a, watch as z, provide as A } from "vue";
+import { useZIndex as V } from "../../../hooks/use-z-index.js";
+import { nmorphGuideInjectionKey as W } from "./types.js";
+const E = /* @__PURE__ */ j({
   __name: "NmorphGuide",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -16,83 +17,85 @@ const G = /* @__PURE__ */ P({
     finishText: { type: String, required: !1, default: "Finish" },
     closeText: { type: String, required: !1, default: "Close" },
     zIndex: { type: Number, required: !1, default: void 0 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !1 },
     width: { type: [Number, String], required: !1, default: void 0 },
     maxWidth: { type: [Number, String], required: !1, default: "280px" }
   },
   emits: ["update:model-value", "update:active-step", "change", "back", "next", "finish", "close"],
-  setup(I, { expose: N, emit: B }) {
-    const r = I, l = B, u = C({}), g = C(void 0);
-    let f = 0;
-    const d = (e) => String(e), y = a(() => {
+  setup(B, { expose: N, emit: F }) {
+    const r = B, i = F, u = C({}), x = C(void 0);
+    let p = 0;
+    const d = (e) => String(e), T = a(() => {
       const e = /* @__PURE__ */ new Map();
-      return r.steps.forEach((t, s) => {
+      return r.steps.forEach((t, o) => {
         e.set(d(t.name), {
           ...t,
-          order: t.order ?? s
+          order: t.order ?? o
         });
       }), e;
-    }), n = a(
+    }), s = a(
       () => Object.values(u.value).map((e) => ({
         ...e,
-        ...y.value.get(d(e.name)),
+        ...T.value.get(d(e.name)),
         registrationOrder: e.registrationOrder
       })).filter((e) => !e.disabled).sort((e, t) => {
-        const s = e.order ?? e.registrationOrder, F = t.order ?? t.registrationOrder;
-        return s - F;
+        const o = e.order ?? e.registrationOrder, P = t.order ?? t.registrationOrder;
+        return o - P;
       })
-    ), q = a(() => r.modelValue && n.value.length > 0), O = a(() => r.activeStep ?? g.value), o = a(() => n.value.findIndex((e) => e.name === O.value)), i = a(() => n.value[o.value] ?? null), T = a(() => o.value <= 0), b = a(() => o.value >= n.value.length - 1), p = (e) => {
-      const t = n.value.find((s) => s.name === e);
-      t && (g.value = e, l("update:active-step", e), l("change", t, n.value.indexOf(t)));
+    ), g = a(() => r.modelValue && s.value.length > 0), b = V(g, () => r.zIndex), q = a(() => r.activeStep ?? x.value), l = a(() => s.value.findIndex((e) => e.name === q.value)), n = a(() => s.value[l.value] ?? null), O = a(() => l.value <= 0), w = a(() => l.value >= s.value.length - 1), f = (e) => {
+      const t = s.value.find((o) => o.name === e);
+      t && (x.value = e, i("update:active-step", e), i("change", t, s.value.indexOf(t)));
     }, c = (e) => {
-      const t = n.value[e];
-      t && p(t.name);
+      const t = s.value[e];
+      t && f(t.name);
     }, v = () => {
-      l("update:model-value", !1), l("close", i.value, o.value);
+      i("update:model-value", !1), i("close", n.value, l.value);
     }, m = () => {
-      l("finish", i.value, o.value), r.closeOnFinish && v();
-    }, x = () => {
-      if (i.value) {
-        if (l("back", i.value, o.value), T.value) {
-          r.loop && c(n.value.length - 1);
+      i("finish", n.value, l.value), r.closeOnFinish && v();
+    }, h = () => {
+      if (n.value) {
+        if (i("back", n.value, l.value), O.value) {
+          r.loop && c(s.value.length - 1);
           return;
         }
-        c(o.value - 1);
+        c(l.value - 1);
       }
-    }, h = () => {
-      if (i.value) {
-        if (l("next", i.value, o.value), b.value) {
+    }, S = () => {
+      if (n.value) {
+        if (i("next", n.value, l.value), w.value) {
           r.loop ? c(0) : m();
           return;
         }
-        c(o.value + 1);
+        c(l.value + 1);
       }
-    }, S = (e) => {
-      p(e);
-    }, w = (e) => {
-      const t = d(e.name), s = u.value[t];
+    }, y = (e) => {
+      f(e);
+    }, _ = (e) => {
+      const t = d(e.name), o = u.value[t];
       u.value = {
         ...u.value,
         [t]: {
-          ...s,
+          ...o,
           ...e,
-          registrationOrder: s?.registrationOrder ?? f
+          registrationOrder: o?.registrationOrder ?? p
         }
-      }, s || (f += 1);
-    }, _ = (e) => {
-      const t = d(e), s = { ...u.value };
-      delete s[t], u.value = s;
+      }, o || (p += 1);
+    }, k = (e) => {
+      const t = d(e), o = { ...u.value };
+      delete o[t], u.value = o;
     };
-    j(
-      [() => r.modelValue, n, i],
-      ([e, t, s]) => {
-        !e || s || t.length === 0 || p(t[0].name);
+    z(
+      [() => r.modelValue, s, n],
+      ([e, t, o]) => {
+        !e || o || t.length === 0 || f(t[0].name);
       },
       { immediate: !0 }
-    ), z(A, {
-      active: q,
-      activeStep: i,
-      activeIndex: o,
-      steps: n,
+    ), A(W, {
+      active: g,
+      activeStep: n,
+      activeIndex: l,
+      steps: s,
       loop: a(() => r.loop),
       showClose: a(() => r.showClose),
       showProgress: a(() => r.showProgress),
@@ -100,25 +103,27 @@ const G = /* @__PURE__ */ P({
       nextText: a(() => r.nextText),
       finishText: a(() => r.finishText),
       closeText: a(() => r.closeText),
-      zIndex: a(() => r.zIndex),
+      zIndex: b,
+      teleportTo: a(() => r.teleportTo),
+      disabledTeleport: a(() => r.disabledTeleport),
       width: a(() => r.width),
       maxWidth: a(() => r.maxWidth),
-      registerStep: w,
-      unregisterStep: _,
-      goToStep: S,
-      back: x,
-      next: h,
+      registerStep: _,
+      unregisterStep: k,
+      goToStep: y,
+      back: h,
+      next: S,
       finish: m,
       close: v
-    }), N({ back: x, next: h, finish: m, close: v, goToStep: S });
-    const k = { props: r, emit: l, registeredSteps: u, internalActiveStep: g, get registrationCursor() {
-      return f;
+    }), N({ back: h, next: S, finish: m, close: v, goToStep: y });
+    const I = { props: r, emit: i, registeredSteps: u, internalActiveStep: x, get registrationCursor() {
+      return p;
     }, set registrationCursor(e) {
-      f = e;
-    }, getStepKey: d, stepOverrides: y, steps: n, active: q, activeStepName: O, activeIndex: o, activeStep: i, isFirstStep: T, isLastStep: b, setActiveStep: p, goToIndex: c, close: v, finish: m, back: x, next: h, goToStep: S, registerStep: w, unregisterStep: _ };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+      p = e;
+    }, getStepKey: d, stepOverrides: T, steps: s, active: g, guideZIndex: b, activeStepName: q, activeIndex: l, activeStep: n, isFirstStep: O, isLastStep: w, setActiveStep: f, goToIndex: c, close: v, finish: m, back: h, next: S, goToStep: y, registerStep: _, unregisterStep: k };
+    return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
   }
 });
 export {
-  G as default
+  E as default
 };

package/dist/components/feedback/nmorph-guide/NmorphGuideStep.vue.js

@@ -1,6 +1,6 @@
 import './NmorphGuideStep.css';
-import m from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as g, mergeProps as p, createElementBlock as o, createCommentVNode as i, createElementVNode as l, toDisplayString as n, createVNode as h } from "vue";
+import g from "./NmorphGuideStep.vue2.js";
+import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as h, mergeProps as m, createElementBlock as i, createCommentVNode as o, createElementVNode as n, toDisplayString as l, createVNode as p } from "vue";
 /* empty css                     */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const u = {
@@ -23,43 +23,45 @@ function w(d, r, y, e, C, N) {
     "force-show": e.isActive,
     position: e.tooltipPosition,
     "z-index": e.guide?.zIndex.value,
+    "teleport-to": e.guide?.teleportTo.value,
+    "disabled-teleport": e.guide?.disabledTeleport.value,
     width: e.guide?.width.value,
     "max-width": e.guide?.maxWidth.value,
     trigger: "manual",
     disabled: !e.guide || e.props.disabled
   }, {
     content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", g(p({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), o("div", u, [
-        e.currentStep.imageSrc ? (t(), o("img", {
+      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", h(m({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", u, [
+        e.currentStep.imageSrc ? (t(), i("img", {
           key: 0,
           class: "nmorph-guide-step__image",
           src: e.currentStep.imageSrc,
           alt: e.currentStep.imageAlt || e.currentStep.title || ""
-        }, null, 8, v)) : i("v-if", !0),
-        l("div", x, [
-          e.guide?.showProgress.value ? (t(), o(
+        }, null, 8, v)) : o("v-if", !0),
+        n("div", x, [
+          e.guide?.showProgress.value ? (t(), i(
             "div",
             k,
-            n(e.stepSlotProps.index + 1) + " / " + n(e.stepSlotProps.total),
+            l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
             1
             /* TEXT */
-          )) : i("v-if", !0),
-          e.currentStep.title ? (t(), o(
+          )) : o("v-if", !0),
+          e.currentStep.title ? (t(), i(
             "h3",
             S,
-            n(e.currentStep.title),
+            l(e.currentStep.title),
             1
             /* TEXT */
-          )) : i("v-if", !0),
-          e.currentStep.text ? (t(), o(
+          )) : o("v-if", !0),
+          e.currentStep.text ? (t(), i(
             "p",
             f,
-            n(e.currentStep.text),
+            l(e.currentStep.text),
             1
             /* TEXT */
-          )) : i("v-if", !0)
+          )) : o("v-if", !0)
         ]),
-        l("div", b, [
+        n("div", b, [
           e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
             key: 0,
             class: "nmorph-guide-step__close",
@@ -67,15 +69,15 @@ function w(d, r, y, e, C, N) {
             design: "plain",
             thickness: "thin",
             onClick: e.guide.close
-          }, null, 8, ["text", "onClick"])) : i("v-if", !0),
-          r[1] || (r[1] = l(
+          }, null, 8, ["text", "onClick"])) : o("v-if", !0),
+          r[1] || (r[1] = n(
             "span",
             { class: "nmorph-guide-step__spacer" },
             null,
             -1
             /* CACHED */
           )),
-          h(e.NmorphButton, {
+          p(e.NmorphButton, {
             class: "nmorph-guide-step__back",
             text: e.guide?.backText.value,
             design: "plain",
@@ -83,23 +85,23 @@ function w(d, r, y, e, C, N) {
             disabled: e.isFirstStep && !e.guide?.loop.value,
             onClick: e.guide?.back
           }, null, 8, ["text", "disabled", "onClick"]),
-          h(e.NmorphButton, {
+          p(e.NmorphButton, {
             class: "nmorph-guide-step__next",
             text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
             thickness: "thin",
             onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
           }, null, 8, ["text"])
         ])
-      ])) : i("v-if", !0)
+      ])) : o("v-if", !0)
     ]),
     default: a(() => [
       c(d.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["force-show", "position", "z-index", "width", "max-width", "disabled"]);
+  }, 8, ["force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "disabled"]);
 }
-const A = /* @__PURE__ */ _(m, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
+const A = /* @__PURE__ */ _(g, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
 export {
   A as default
 };

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--nmorph-private-tooltip-max-width: 120px;--nmorph-private-tooltip-width: fit-content;--nmorph-private-tooltip-height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-private-tooltip-z-index);width:var(--nmorph-private-tooltip-width);max-width:var(--nmorph-private-tooltip-max-width);height:var(--nmorph-private-tooltip-height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-private-tooltip-root-width)}
+.nmorph-tooltip{--nmorph-private-tooltip-max-width: 120px;--nmorph-private-tooltip-width: fit-content;--nmorph-private-tooltip-height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-private-tooltip-z-index);width:var(--nmorph-private-tooltip-width);max-width:var(--nmorph-private-tooltip-max-width);height:var(--nmorph-private-tooltip-height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-private-tooltip-root-width)}.nmorph-tooltip__info-content--teleported{position:fixed;z-index:var(--nmorph-private-tooltip-z-index);width:var(--nmorph-private-tooltip-width);max-width:var(--nmorph-private-tooltip-max-width);height:var(--nmorph-private-tooltip-height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip__info-content--teleported span{white-space:nowrap}.nmorph-tooltip__info-content--teleported .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--top{transform:translateY(-8px)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--right{transform:translate(12px)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--bottom{transform:translateY(12px)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--left{transform:translate(-12px)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip__info-content--teleported.nmorph-tooltip__info-content--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue.js

@@ -1,25 +1,21 @@
 import './NmorphTooltip.css';
-import f from "./NmorphTooltip.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeStyle as d, normalizeClass as h, createElementVNode as n, renderSlot as s, Fragment as y, createBlock as c, Transition as _, withCtx as m, createCommentVNode as r, toDisplayString as p } from "vue";
+import h from "./NmorphTooltip.vue2.js";
+import { openBlock as t, createElementBlock as e, normalizeStyle as c, normalizeClass as a, createElementVNode as n, renderSlot as d, Fragment as y, createBlock as p, Transition as _, withCtx as f, createCommentVNode as l, toDisplayString as m, Teleport as v, createVNode as k } from "vue";
 /* empty css                   */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = {
+import C from "../../../_virtual/_plugin-vue_export-helper.js";
+const T = {
   ref: "slotDOMRef",
   class: "nmorph-tooltip__trigger"
-}, C = { class: "nmorph-tooltip__shadow-content" }, P = {
+}, P = { class: "nmorph-tooltip__shadow-content" }, g = {
   key: 0,
   class: "nmorph-tooltip__triangle"
-}, g = { key: 1 }, x = {
-  key: 0,
-  ref: "tooltipBody",
-  class: "nmorph-tooltip__info-content"
-}, E = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
-function b(l, a, i, o, u, w) {
-  return e(), t(
+}, x = { key: 1 }, w = { class: "nmorph-tooltip__shadow-content" }, B = { key: 0 }, E = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
+function b(r, s, i, o, N, R) {
+  return t(), e(
     "div",
     {
-      class: h(o.modifiers),
-      style: d(o.styles)
+      class: a(o.modifiers),
+      style: c(o.styles)
     },
     [
       n(
@@ -38,77 +34,81 @@ function b(l, a, i, o, u, w) {
         [
           n(
             "div",
-            v,
+            T,
             [
-              s(l.$slots, "default")
+              d(r.$slots, "default")
             ],
             512
             /* NEED_PATCH */
           ),
-          o.props.disabled ? r("v-if", !0) : (e(), t(
+          !o.props.disabled && !o.teleportTooltip ? (t(), e(
             y,
             { key: 0 },
             [
-              o.props.forceCoordinate ? (e(), c(_, {
+              o.props.forceCoordinate ? (t(), p(_, {
                 key: 0,
                 name: "opacity"
               }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
+                default: f(() => [
+                  o.shouldRenderTooltip ? (t(), e(
                     "div",
                     {
                       key: 0,
                       ref: "tooltipBody",
-                      class: "nmorph-tooltip__info-content",
-                      style: d({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
+                      class: a(o.tooltipContentClass),
+                      style: c({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
                     },
                     [
-                      n("div", C, [
-                        o.props.forceCoordinate ? r("v-if", !0) : (e(), t("div", P)),
-                        o.props.text ? (e(), t(
+                      n("div", P, [
+                        o.props.forceCoordinate ? l("v-if", !0) : (t(), e("div", g)),
+                        o.props.text ? (t(), e(
                           "span",
-                          g,
-                          p(i.text),
+                          x,
+                          m(i.text),
                           1
                           /* TEXT */
-                        )) : s(l.$slots, "content", { key: 2 })
+                        )) : d(r.$slots, "content", { key: 2 })
                       ])
                     ],
-                    4
-                    /* STYLE */
-                  )) : r("v-if", !0)
+                    6
+                    /* CLASS, STYLE */
+                  )) : l("v-if", !0)
                 ]),
                 _: 3
                 /* FORWARDED */
-              })) : (e(), c(_, {
+              })) : (t(), p(_, {
                 key: 1,
                 name: "opacity"
               }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
+                default: f(() => [
+                  o.shouldRenderTooltip ? (t(), e(
                     "div",
-                    x,
+                    {
+                      key: 0,
+                      ref: "tooltipBody",
+                      class: a(o.tooltipContentClass)
+                    },
                     [
-                      n("div", E, [
-                        a[0] || (a[0] = n(
+                      n("div", w, [
+                        s[0] || (s[0] = n(
                           "div",
                           { class: "nmorph-tooltip__triangle" },
                           null,
                           -1
                           /* CACHED */
                         )),
-                        o.props.text ? (e(), t(
+                        o.props.text ? (t(), e(
                           "span",
-                          M,
-                          p(i.text),
+                          B,
+                          m(i.text),
                           1
                           /* TEXT */
-                        )) : s(l.$slots, "content", { key: 1 })
+                        )) : d(r.$slots, "content", { key: 1 })
                       ])
                     ],
-                    512
-                    /* NEED_PATCH */
-                  )) : r("v-if", !0)
+                    2
+                    /* CLASS */
+                  )) : l("v-if", !0)
                 ]),
                 _: 3
                 /* FORWARDED */
@@ -116,17 +116,57 @@ function b(l, a, i, o, u, w) {
             ],
             64
             /* STABLE_FRAGMENT */
-          ))
+          )) : l("v-if", !0)
         ],
         544
         /* NEED_HYDRATION, NEED_PATCH */
-      )
+      ),
+      o.teleportTooltip ? (t(), p(v, {
+        key: 0,
+        to: o.props.teleportTo
+      }, [
+        k(_, { name: "opacity" }, {
+          default: f(() => [
+            o.shouldRenderTooltip ? (t(), e(
+              "div",
+              {
+                key: 0,
+                ref: "tooltipBody",
+                class: a(o.tooltipContentClass),
+                style: c(o.tooltipContentStyle)
+              },
+              [
+                n("div", E, [
+                  s[1] || (s[1] = n(
+                    "div",
+                    { class: "nmorph-tooltip__triangle" },
+                    null,
+                    -1
+                    /* CACHED */
+                  )),
+                  o.props.text ? (t(), e(
+                    "span",
+                    M,
+                    m(i.text),
+                    1
+                    /* TEXT */
+                  )) : d(r.$slots, "content", { key: 1 })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : l("v-if", !0)
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ], 8, ["to"])) : l("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const R = /* @__PURE__ */ k(f, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+const O = /* @__PURE__ */ C(h, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
 export {
-  R as default
+  O as default
 };