edvoyui-component-library-test-flight 0.0.221 → 0.0.222

package/dist/components/popover/EUIPopover.d.ts

@@ -52,6 +52,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: NumberConstructor;
         default: number;
     };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {} & {
     "update:visible": (value: boolean) => any;
     show: () => any;
@@ -92,6 +96,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: NumberConstructor;
         default: number;
     };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
@@ -105,6 +113,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     customButton: string;
     visible: boolean;
     hoverHideDelay: number;
+    teleported: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
     popperWrapper: HTMLDivElement;
     popperButton: HTMLDivElement;

package/dist/components/popover/EUIPopover.vue

@@ -15,24 +15,30 @@
     >
       <slot name="referenceButton" :open="isOpen"/>
     </div>
-    <div
-     ref="tooltip"
-      :id="tooltipId"
-      role="tooltip"
-      :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
-      :data-show="isOpen ? '' : null"
-      @click.stop
-      @mouseenter="handleTooltipMouseEnter"
-      @mouseleave="handleTooltipMouseLeave"
-    >
-      <div ref="arrowElement" class="arrow" data-popper-arrow />
+    <!-- When `teleported`, the tooltip is rendered at <body> (Popper uses a
+         `fixed` strategy) so it escapes any ancestor `overflow`/stacking
+         context — e.g. a scrollable table or a sticky column. Disabled by
+         default, so existing usages keep rendering the tooltip in place. -->
+    <Teleport to="body" :disabled="!teleported">
       <div
-        v-if="title"
-        class="text-base font-semibold text-current leading-[normal] px-4 py-2"
-        v-text="title"
-      />
-      <slot />
-    </div>
+        ref="tooltip"
+        :id="tooltipId"
+        role="tooltip"
+        :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
+        :data-show="isOpen ? '' : null"
+        @click.stop
+        @mouseenter="handleTooltipMouseEnter"
+        @mouseleave="handleTooltipMouseLeave"
+      >
+        <div ref="arrowElement" class="arrow" data-popper-arrow />
+        <div
+          v-if="title"
+          class="text-base font-semibold text-current leading-[normal] px-4 py-2"
+          v-text="title"
+        />
+        <slot />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -77,6 +83,12 @@ const props = defineProps({
     type: Number,
     default: 100,
   },
+  // Render the tooltip at <body> using a fixed Popper strategy so it can break
+  // out of ancestor overflow/stacking contexts. Off by default for back-compat.
+  teleported: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const popperWrapper = ref<HTMLElement | null>(null);
@@ -122,6 +134,9 @@ const initializePopper = () => {
   if (popperButton.value && tooltip.value && arrowElement.value) {
     popperInstance.value = createPopper(popperButton.value, tooltip.value, {
       placement: props.placement,
+      // `fixed` keeps the teleported tooltip glued to the trigger without an
+      // offset parent; `absolute` (Popper's default) is unchanged otherwise.
+      strategy: props.teleported ? 'fixed' : 'absolute',
       modifiers: [
         { name: 'offset', options: { offset: [0, 10] } },
         { name: 'arrow', options: { element: arrowElement.value } },
@@ -229,11 +244,13 @@ onMounted(() => {
   }
 
   if (props.trigger === 'click') {
+    // `tooltip` is ignored too: once teleported it lives outside popperWrapper,
+    // so clicks inside it would otherwise register as "outside" and close it.
     onClickOutside(popperWrapper.value, () => {
         if (isOpen.value) {
              hide(true);
         }
-    }, { ignore: [popperButton] });
+    }, { ignore: [popperButton, tooltip] });
   }
 });