@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-tooltip/co-tooltip.js

@@ -74,6 +74,9 @@ export class CoTooltip {
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
             const panelRect = this.panelEl.getBoundingClientRect();
+            // Skip if panel is not laid out yet (not connected to DOM)
+            if (panelRect.width === 0 && panelRect.height === 0)
+                return;
             const { top, left, actualPlacement } = computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
@@ -85,7 +88,10 @@ export class CoTooltip {
             // Compensate for transformed ancestors
             if (!this.offsetAncestorComputed) {
                 this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
-                this.offsetAncestorComputed = true;
+                // Only cache if the element is connected (traversal was reliable)
+                if (this.cachedOffsetAncestor || this.panelEl.isConnected) {
+                    this.offsetAncestorComputed = true;
+                }
             }
             if (this.cachedOffsetAncestor) {
                 const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
@@ -174,7 +180,7 @@ export class CoTooltip {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '3e8354dc6a54b9566b66383678b7822ac73fa5dd', class: "co-tooltip" }, h("div", { key: '37dc44fb875ad9695acbbdff668985a5333d6b32', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '95e4407d37a7677cfcfcb9e3d64d0a8ef167988a' })), this.visible && this.content && (h("div", { key: 'a4146ad80d3ec787b1c1d61ca5088375768ca667', id: "tooltip-panel", class: {
+        return (h("div", { key: '77842efc5b054b049c4fb38f8d1f43fb2f6c418d', class: "co-tooltip" }, h("div", { key: '406170b45a6cc284253151b986c0d1fc8375ce30', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '169ec07030c124a4cbea6cb4b56ec75682af1793' })), this.visible && this.content && (h("div", { key: '58f68348a2068dbfa8fc16a0dea4cdee2f64093b', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
             }, role: "tooltip", ref: (el) => {
@@ -182,7 +188,7 @@ export class CoTooltip {
                     this.panelEl = el;
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '15a322164920483a286500729c46332fbff1b9ec', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '417aae8b03ba81cc0989fa66044ef98cd948b024', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'a5dc3bcdceb72c5e7a6533e3025b882743bfd19a', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'eaa99090f18a0160a42ad2885841cd3c0b163bba', class: "co-tooltip__content" }, this.content)))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }