@eric-emg/symphiq-components 1.2.34 → 1.2.36

package/fesm2022/symphiq-components.mjs

@@ -5,7 +5,7 @@ import { Injectable, signal, input, ChangeDetectionStrategy, Component, output,
 import { BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common';
 import { NgClass, CommonModule } from '@angular/common';
-import * as i5 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -163,23 +163,45 @@ class TooltipService {
             content: null,
             position: 'top',
             targetRect: null,
-            visible: false
+            visible: false,
+            scrollContainer: null,
+            checkHideCallback: undefined
         });
         this.tooltipState$ = this.tooltipState.asObservable();
+        this.scrollContainer = null;
+        this.isTooltipHovered = false;
     }
-    show(type, content, targetRect, position = 'top', mousePosition) {
+    setScrollContainer(container) {
+        this.scrollContainer = container;
+    }
+    setTooltipHovered(hovered) {
+        this.isTooltipHovered = hovered;
+    }
+    isHoveredOverTooltip() {
+        return this.isTooltipHovered;
+    }
+    triggerHideCheck() {
+        const callback = this.tooltipState.value.checkHideCallback;
+        if (callback) {
+            callback();
+        }
+    }
+    show(type, content, targetRect, position = 'top', mousePosition, checkHideCallback) {
         // Auto-adjust position if too close to screen edges
         let adjustedPosition = position;
         // Use different thresholds based on tooltip type
         // Insight tooltips can be quite tall, so need more space
         const HORIZONTAL_THRESHOLD = 200;
         const VERTICAL_THRESHOLD = type === 'insight' ? 350 : 200;
+        // Get viewport dimensions - use scroll container if available, otherwise window
+        const viewportWidth = this.scrollContainer?.clientWidth || window.innerWidth;
+        const viewportHeight = this.scrollContainer?.clientHeight || window.innerHeight;
         // Check left edge
         if (position === 'left' && targetRect.left < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'right';
         }
         // Check right edge
-        if (position === 'right' && (window.innerWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
+        if (position === 'right' && (viewportWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'left';
         }
         // Check top edge
@@ -187,12 +209,12 @@ class TooltipService {
             adjustedPosition = 'bottom';
         }
         // Check bottom edge - prioritize flipping to top if not enough space
-        if (position === 'bottom' && (window.innerHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
+        if (position === 'bottom' && (viewportHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
             adjustedPosition = 'top';
         }
         // Smart auto-detection for 'top' position tooltips near bottom
         if (position === 'top') {
-            const spaceBelow = window.innerHeight - targetRect.bottom;
+            const spaceBelow = viewportHeight - targetRect.bottom;
             const spaceAbove = targetRect.top;
             // If more space above and not enough space below, keep it on top
             // If more space below, switch to bottom
@@ -203,15 +225,27 @@ class TooltipService {
                 adjustedPosition = 'bottom';
             }
         }
-        this.tooltipState.next({ type, content, position: adjustedPosition, targetRect, mousePosition, visible: true });
+        this.tooltipState.next({
+            type,
+            content,
+            position: adjustedPosition,
+            targetRect,
+            mousePosition,
+            visible: true,
+            scrollContainer: this.scrollContainer,
+            checkHideCallback
+        });
     }
     hide() {
+        this.isTooltipHovered = false;
         this.tooltipState.next({
             type: null,
             content: null,
             position: 'top',
             targetRect: null,
-            visible: false
+            visible: false,
+            scrollContainer: this.scrollContainer,
+            checkHideCallback: undefined
         });
     }
     updatePosition(targetRect) {
@@ -1456,6 +1490,11 @@ class TooltipDirective {
         this.isHovered.set(false);
         this.scheduleHide();
     }
+    onMouseEnterAgain() {
+        // If user returns to element while tooltip is still visible, cancel hide
+        this.clearHideTimeout();
+        this.isHovered.set(true);
+    }
     onFocus() {
         this.clearHideTimeout();
         this.isHovered.set(true);
@@ -1475,14 +1514,17 @@ class TooltipDirective {
             const position = this.tooltipPosition();
             if (content && this.isHovered()) {
                 const mousePos = position === 'auto' ? { x: this.mouseX, y: this.mouseY } : undefined;
-                this.tooltipService.show(type, content, rect, position, mousePos);
+                // Pass a callback that the tooltip can use to trigger hide checks
+                const checkHideCallback = () => this.scheduleHide();
+                this.tooltipService.show(type, content, rect, position, mousePos, checkHideCallback);
             }
         }, this.tooltipDelay());
     }
     scheduleHide() {
         this.clearHideTimeout();
         this.hideTimeout = setTimeout(() => {
-            if (!this.isHovered()) {
+            // Only hide if neither the element nor the tooltip is hovered
+            if (!this.isHovered() && !this.tooltipService.isHoveredOverTooltip()) {
                 this.tooltipService.hide();
             }
         }, 100);
@@ -1506,7 +1548,7 @@ class TooltipDirective {
     }
     static { this.ɵfac = function TooltipDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipDirective)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TooltipDirective, selectors: [["", "libSymphiqTooltip", ""]], hostBindings: function TooltipDirective_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mouseenter", function TooltipDirective_mouseenter_HostBindingHandler($event) { return ctx.onMouseEnter($event); })("mousemove", function TooltipDirective_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); })("mouseleave", function TooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); })("focus", function TooltipDirective_focus_HostBindingHandler() { return ctx.onFocus(); })("blur", function TooltipDirective_blur_HostBindingHandler() { return ctx.onBlur(); });
+            i0.ɵɵlistener("mouseenter", function TooltipDirective_mouseenter_HostBindingHandler() { return ctx.onMouseEnterAgain(); })("mousemove", function TooltipDirective_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); })("mouseleave", function TooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); })("focus", function TooltipDirective_focus_HostBindingHandler() { return ctx.onFocus(); })("blur", function TooltipDirective_blur_HostBindingHandler() { return ctx.onBlur(); });
         } }, inputs: { symphiqTooltip: [1, "libSymphiqTooltip", "symphiqTooltip"], tooltipType: [1, "tooltipType"], tooltipPosition: [1, "tooltipPosition"], tooltipDelay: [1, "tooltipDelay"] } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TooltipDirective, [{
@@ -1524,6 +1566,9 @@ class TooltipDirective {
         }], onMouseLeave: [{
             type: HostListener,
             args: ['mouseleave']
+        }], onMouseEnterAgain: [{
+            type: HostListener,
+            args: ['mouseenter']
         }], onFocus: [{
             type: HostListener,
             args: ['focus']
@@ -10778,110 +10823,110 @@ const _c0$6 = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.metricContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.metricContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template, 1, 2, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.metricContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.metricContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.statusContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.statusContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template, 1, 2, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.statusContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.statusContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.trendContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.trendContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template, 1, 2, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.trendContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.trendContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.priorityContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.priorityContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template, 1, 2, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.priorityContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.priorityContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.badgeContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.badgeContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template, 1, 2, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.badgeContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.badgeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.breakdownContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.breakdownContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template, 1, 2, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.breakdownContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.breakdownContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.competitiveContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.competitiveContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template, 1, 2, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.competitiveContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.competitiveContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.insightsListContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.insightsListContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template, 1, 2, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.insightsListContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.insightsListContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.narrativeContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.narrativeContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template, 1, 2, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.narrativeContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.narrativeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
@@ -10891,18 +10936,18 @@ function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Tem
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const section_r2 = ctx.$implicit;
+    const section_r3 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r2.title);
+    i0.ɵɵtextInterpolate(section_r3.title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r2.content);
+    i0.ɵɵtextInterpolate(section_r3.content);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template, 5, 2, "div", 7, i0.ɵɵrepeaterTrackByIndex);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r3["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -10910,25 +10955,25 @@ function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "sections" in content_r3 ? 1 : -1);
+    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "sections" in content_r4 ? 1 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r3["text"], " ");
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r4["text"], " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -10936,11 +10981,11 @@ function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "text" in content_r3 ? 1 : 2);
+    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "text" in content_r4 ? 1 : 2);
 } }
 function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -10948,28 +10993,30 @@ function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
+    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵlistener("mouseenter", function TooltipContainerComponent_Conditional_0_Template_div_mouseenter_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseEnter()); })("mouseleave", function TooltipContainerComponent_Conditional_0_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseLeave()); });
     i0.ɵɵdeclareLet(2);
     i0.ɵɵconditionalCreate(3, TooltipContainerComponent_Conditional_0_Case_3_Template, 1, 1)(4, TooltipContainerComponent_Conditional_0_Case_4_Template, 1, 1)(5, TooltipContainerComponent_Conditional_0_Case_5_Template, 1, 1)(6, TooltipContainerComponent_Conditional_0_Case_6_Template, 1, 1)(7, TooltipContainerComponent_Conditional_0_Case_7_Template, 1, 1)(8, TooltipContainerComponent_Conditional_0_Case_8_Template, 1, 1)(9, TooltipContainerComponent_Conditional_0_Case_9_Template, 1, 1)(10, TooltipContainerComponent_Conditional_0_Case_10_Template, 1, 1)(11, TooltipContainerComponent_Conditional_0_Case_11_Template, 1, 1)(12, TooltipContainerComponent_Conditional_0_Case_12_Template, 2, 2, "div", 3)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 3, 2, "div", 4)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 2, 2, "div", 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_7_0;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r0.tooltipLeft(), "px")("top", ctx_r0.tooltipTop(), "px");
-    i0.ɵɵproperty("ngClass", ctx_r0.containerClass())("@fadeInScale", undefined);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r1.tooltipLeft(), "px")("top", ctx_r1.tooltipTop(), "px");
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClass())("@fadeInScale", undefined);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.contentClass());
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
     i0.ɵɵadvance();
-    i0.ɵɵstoreLet(ctx_r0.tooltipContent());
+    i0.ɵɵstoreLet(ctx_r1.tooltipContent());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_7_0 = ctx_r0.tooltipType()) === "metric" ? 3 : tmp_7_0 === "status" ? 4 : tmp_7_0 === "trend" ? 5 : tmp_7_0 === "priority" ? 6 : tmp_7_0 === "badge" ? 7 : tmp_7_0 === "breakdown" ? 8 : tmp_7_0 === "competitive" ? 9 : tmp_7_0 === "insightsList" ? 10 : tmp_7_0 === "narrative" ? 11 : tmp_7_0 === "insight" ? 12 : tmp_7_0 === "text" ? 13 : 14);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.tooltipType()) === "metric" ? 3 : tmp_7_0 === "status" ? 4 : tmp_7_0 === "trend" ? 5 : tmp_7_0 === "priority" ? 6 : tmp_7_0 === "badge" ? 7 : tmp_7_0 === "breakdown" ? 8 : tmp_7_0 === "competitive" ? 9 : tmp_7_0 === "insightsList" ? 10 : tmp_7_0 === "narrative" ? 11 : tmp_7_0 === "insight" ? 12 : tmp_7_0 === "text" ? 13 : 14);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -10983,7 +11030,8 @@ class TooltipContainerComponent {
             position: 'top',
             targetRect: null,
             mousePosition: undefined,
-            visible: false
+            visible: false,
+            scrollContainer: null
         }, ...(ngDevMode ? [{ debugName: "tooltipStateSignal" }] : []));
         this.isVisible = computed(() => this.tooltipStateSignal().visible, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
         this.tooltipType = computed(() => this.tooltipStateSignal().type, ...(ngDevMode ? [{ debugName: "tooltipType" }] : []));
@@ -10991,6 +11039,7 @@ class TooltipContainerComponent {
         this.tooltipPosition = computed(() => this.tooltipStateSignal().position, ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
         this.targetRect = computed(() => this.tooltipStateSignal().targetRect, ...(ngDevMode ? [{ debugName: "targetRect" }] : []));
         this.mousePosition = computed(() => this.tooltipStateSignal().mousePosition, ...(ngDevMode ? [{ debugName: "mousePosition" }] : []));
+        this.scrollContainer = computed(() => this.tooltipStateSignal().scrollContainer, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
         // Type-safe content accessors for each tooltip type
         this.metricContent = computed(() => {
             const content = this.tooltipContent();
@@ -11036,6 +11085,8 @@ class TooltipContainerComponent {
                 return true;
             const position = this.tooltipPosition();
             const tooltipWidth = 384;
+            const container = this.scrollContainer();
+            const viewportWidth = container?.clientWidth || window.innerWidth;
             // For 'auto' positioning, always center horizontally
             if (position === 'auto') {
                 return true;
@@ -11044,7 +11095,7 @@ class TooltipContainerComponent {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
                 const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - 10;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
                 return !wouldGoOffLeft && !wouldGoOffRight;
             }
             return false;
@@ -11066,7 +11117,8 @@ class TooltipContainerComponent {
             this.tooltipStateSignal.set({
                 ...state,
                 mousePosition: state.mousePosition || undefined,
-                content: state.content ?? undefined
+                content: state.content ?? undefined,
+                scrollContainer: state.scrollContainer || null
             });
         });
         effect(() => {
@@ -11078,6 +11130,14 @@ class TooltipContainerComponent {
             }
         });
     }
+    onTooltipMouseEnter() {
+        this.tooltipService.setTooltipHovered(true);
+    }
+    onTooltipMouseLeave() {
+        this.tooltipService.setTooltipHovered(false);
+        // Trigger the hide check callback from the directive
+        this.tooltipService.triggerHideCheck();
+    }
     calculateLeft() {
         const rect = this.targetRect();
         if (!rect)
@@ -11085,6 +11145,8 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
+        const container = this.scrollContainer();
+        const viewportWidth = container?.clientWidth || window.innerWidth;
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
@@ -11093,8 +11155,8 @@ class TooltipContainerComponent {
             if (leftPos - halfWidth < 10) {
                 leftPos = halfWidth + 10;
             }
-            else if (leftPos + halfWidth > window.innerWidth - 10) {
-                leftPos = window.innerWidth - halfWidth - 10;
+            else if (leftPos + halfWidth > viewportWidth - 10) {
+                leftPos = viewportWidth - halfWidth - 10;
             }
             return leftPos;
         }
@@ -11105,14 +11167,14 @@ class TooltipContainerComponent {
                 const halfWidth = tooltipWidth / 2;
                 // Check if centered tooltip would go off screen
                 const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - 10;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding
                     return 10;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding
-                    return window.innerWidth - tooltipWidth - 10;
+                    return viewportWidth - tooltipWidth - 10;
                 }
                 else {
                     // Center normally (transform will be applied)
@@ -11130,7 +11192,7 @@ class TooltipContainerComponent {
             case 'right': {
                 const rightPosition = rect.right + 8;
                 // If tooltip would go off right edge, position it to the left instead
-                if (rightPosition + tooltipWidth > window.innerWidth - 10) {
+                if (rightPosition + tooltipWidth > viewportWidth - 10) {
                     return rect.left - tooltipWidth - 8;
                 }
                 return rightPosition;
@@ -11146,6 +11208,8 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
+        const container = this.scrollContainer();
+        const viewportHeight = container?.clientHeight || window.innerHeight;
         // Estimate tooltip height based on type
         let estimatedHeight = 100;
         if (type === 'insight') {
@@ -11159,7 +11223,7 @@ class TooltipContainerComponent {
             const offset = 20; // Offset from mouse cursor
             let topPos = mousePos.y + offset;
             // If tooltip would go off bottom of screen, position above cursor
-            if (topPos + estimatedHeight > window.innerHeight - 10) {
+            if (topPos + estimatedHeight > viewportHeight - 10) {
                 topPos = mousePos.y - estimatedHeight - offset;
             }
             // Ensure it doesn't go off top
@@ -11180,7 +11244,7 @@ class TooltipContainerComponent {
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
                 // If tooltip would go off bottom of screen, position it above instead
-                if (bottomPosition + estimatedHeight > window.innerHeight - 10) {
+                if (bottomPosition + estimatedHeight > viewportHeight - 10) {
                     return rect.top - estimatedHeight - 8;
                 }
                 return bottomPosition;
@@ -11189,7 +11253,7 @@ class TooltipContainerComponent {
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
                 // Keep within viewport
-                const maxTop = window.innerHeight - estimatedHeight - 10;
+                const maxTop = viewportHeight - estimatedHeight - 10;
                 return Math.max(10, Math.min(centerPosition, maxTop));
             }
             default:
@@ -11197,7 +11261,7 @@ class TooltipContainerComponent {
         }
     }
     static { this.ɵfac = function TooltipContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "ngClass"], [1, "fixed", "z-[100]", "pointer-events-none", 3, "ngClass"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", 3, "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "ngClass"], [1, "fixed", "z-[100]", "pointer-events-none", 3, "ngClass"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", "pointer-events-auto", 3, "mouseenter", "mouseleave", "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 9, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
@@ -11258,7 +11322,11 @@ class TooltipContainerComponent {
         [ngClass]="containerClass()"
         class="fixed z-[100] pointer-events-none"
         @fadeInScale>
-        <div [ngClass]="contentClass()" class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 max-w-sm">
+        <div
+          [ngClass]="contentClass()"
+          class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 max-w-sm pointer-events-auto"
+          (mouseenter)="onTooltipMouseEnter()"
+          (mouseleave)="onTooltipMouseLeave()">
           @let content = tooltipContent();
           @switch (tooltipType()) {
             @case ('metric') {
@@ -11357,7 +11425,7 @@ class TooltipContainerComponent {
   `
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 169 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 173 }); })();
 
 function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -19172,7 +19240,7 @@ class SearchBarComponent {
             i0.ɵɵconditionalCreate(0, SearchBarComponent_Conditional_0_Template, 17, 10, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.searchService.isSearchOpen() ? 0 : -1);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
@@ -21007,10 +21075,11 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template(rf, ctx
     i0.ɵɵproperty("metrics", ctx_r2.competitiveMetrics())("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact());
 } }
 class SymphiqFunnelAnalysisDashboardComponent {
-    constructor(funnelOrderService, viewModeService, searchService) {
+    constructor(funnelOrderService, viewModeService, searchService, tooltipService) {
         this.funnelOrderService = funnelOrderService;
         this.viewModeService = viewModeService;
         this.searchService = searchService;
+        this.tooltipService = tooltipService;
         // Input signals (Angular 20 signal-based inputs)
         this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -21040,6 +21109,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.isProgrammaticScroll = false;
         this.lastStateChangeTime = 0;
         this.STATE_CHANGE_COOLDOWN = 500; // milliseconds
+        this.embeddedScrollContainer = null;
         // Mobile navigation sections
         this.navSections = [
             { id: 'overview', label: 'Overview', icon: 'overview' },
@@ -21360,169 +21430,80 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // Set up container scroll listener when in embedded mode
         if (this.embedded()) {
             let container = null;
-            console.log('[Scroll Debug v6] Embedded mode detected, setting up scroll listener');
-            console.log('[Scroll Debug v6] scrollContainerId:', this.scrollContainerId());
             // If a scroll container ID is provided, use that element
             if (this.scrollContainerId()) {
-                const element = document.getElementById(this.scrollContainerId());
-                if (!element) {
-                    console.warn(`[Scroll Debug] Scroll container with id "${this.scrollContainerId()}" not found. Scroll tracking will not work.`);
-                }
-                else {
-                    console.log('[Scroll Debug] Found external scroll container:', element);
-                    console.log('[Scroll Debug] Container tag name:', element.tagName);
+                const setupScrollContainer = () => {
+                    const element = document.getElementById(this.scrollContainerId());
+                    if (!element) {
+                        return false;
+                    }
                     // Check if this is an Ionic ion-content element
                     if (element.tagName.toLowerCase() === 'ion-content') {
-                        console.log('[Scroll Debug] Detected Ionic ion-content, attempting to get scrollable element');
-                        // Try to get the scroll element from Ionic's ion-content
-                        // Ionic stores the scrollable element in the component itself
                         const ionContent = element;
-                        // Method 1: Try getScrollElement() method (Ionic 4+)
+                        // Get the scrollable element from Ionic
                         if (typeof ionContent.getScrollElement === 'function') {
-                            console.log('[Scroll Debug] Using getScrollElement() method');
                             ionContent.getScrollElement().then((scrollElement) => {
-                                console.log('[Scroll Debug] Got Ionic scroll element:', scrollElement);
-                                const dimensions = {
-                                    clientHeight: scrollElement.clientHeight,
-                                    scrollHeight: scrollElement.scrollHeight,
-                                    scrollTop: scrollElement.scrollTop,
-                                    hasOverflow: scrollElement.scrollHeight > scrollElement.clientHeight
-                                };
-                                console.log('[Scroll Debug] Ionic scroll element dimensions:', dimensions);
-                                if (!dimensions.hasOverflow) {
-                                    console.warn('[Scroll Debug] ⚠️ WARNING: Scroll element has no overflow! Content may still be loading.');
-                                    console.warn('[Scroll Debug] The dashboard content needs to be taller than', dimensions.clientHeight, 'px to enable scrolling');
-                                    // Diagnostic: Check the dashboard component's actual rendered height
-                                    setTimeout(() => {
-                                        const dashboardEl = this.dashboardContainer?.nativeElement;
-                                        if (dashboardEl) {
-                                            const styles = window.getComputedStyle(dashboardEl);
-                                            console.log('[Scroll Debug] Dashboard container computed styles:', {
-                                                height: styles.height,
-                                                minHeight: styles.minHeight,
-                                                maxHeight: styles.maxHeight,
-                                                display: styles.display,
-                                                position: styles.position,
-                                                overflow: styles.overflow,
-                                                scrollHeight: dashboardEl.scrollHeight,
-                                                clientHeight: dashboardEl.clientHeight,
-                                                offsetHeight: dashboardEl.offsetHeight
-                                            });
-                                            // Check children
-                                            const children = Array.from(dashboardEl.children);
-                                            console.log('[Scroll Debug] Dashboard has', children.length, 'direct children');
-                                            children.forEach((child, idx) => {
-                                                const childStyles = window.getComputedStyle(child);
-                                                console.log(`[Scroll Debug] Child ${idx}:`, {
-                                                    tagName: child.tagName,
-                                                    height: childStyles.height,
-                                                    display: childStyles.display,
-                                                    clientHeight: child.clientHeight,
-                                                    scrollHeight: child.scrollHeight
-                                                });
-                                            });
-                                            // Check if content is actually rendering
-                                            const hasVisibleContent = dashboardEl.scrollHeight > 100;
-                                            if (!hasVisibleContent) {
-                                                console.error('[Scroll Debug] ⚠️ CRITICAL: Dashboard has minimal content! Check if funnelAnalysis data is loaded.');
-                                            }
-                                        }
-                                    }, 100);
-                                    // Set up a MutationObserver to detect when content becomes scrollable
-                                    const observer = new MutationObserver(() => {
-                                        const newScrollHeight = scrollElement.scrollHeight;
-                                        const newClientHeight = scrollElement.clientHeight;
-                                        if (newScrollHeight > newClientHeight) {
-                                            console.log('[Scroll Debug] ✓ Content is now scrollable!', {
-                                                clientHeight: newClientHeight,
-                                                scrollHeight: newScrollHeight,
-                                                hasOverflow: true
-                                            });
-                                            observer.disconnect();
-                                        }
-                                    });
-                                    observer.observe(scrollElement, {
-                                        childList: true,
-                                        subtree: true,
-                                        attributes: true
-                                    });
-                                    console.log('[Scroll Debug] Monitoring for content changes...');
-                                }
-                                // Attach to BOTH the inner scroll element AND the ion-content itself
+                                // Store reference for use in scrollToSection and tooltips
+                                this.embeddedScrollContainer = scrollElement;
+                                this.tooltipService.setScrollContainer(scrollElement);
+                                // Attach scroll listeners
                                 scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
-                                console.log('[Scroll Debug] Attached scroll listener to Ionic inner scroll element');
-                                // ALSO listen to ion-content's ionScroll event (Ionic's custom scroll event)
-                                ionContent.addEventListener('ionScroll', (event) => {
-                                    console.log('[Scroll Debug] ionScroll event fired:', event.detail?.scrollTop);
-                                    this.onContainerScroll(scrollElement);
-                                }, { passive: true });
-                                console.log('[Scroll Debug] Attached ionScroll listener to ion-content');
-                                // FALLBACK: Poll scroll position directly from scrollElement
-                                // This ensures we catch scroll events even if neither 'scroll' nor 'ionScroll' fire
+                                ionContent.addEventListener('ionScroll', () => this.onContainerScroll(scrollElement), { passive: true });
+                                // Polling fallback for reliable scroll detection
                                 let lastScrollTop = 0;
-                                let pollCount = 0;
                                 const pollScroll = () => {
-                                    pollCount++;
                                     const currentScrollTop = scrollElement.scrollTop;
                                     if (currentScrollTop !== lastScrollTop) {
-                                        console.log('[Scroll Debug v6] Poll #', pollCount, '- Scroll detected:', lastScrollTop, '->', currentScrollTop);
                                         lastScrollTop = currentScrollTop;
                                         this.onContainerScroll(scrollElement);
                                     }
                                     requestAnimationFrame(pollScroll);
                                 };
                                 requestAnimationFrame(pollScroll);
-                                console.log('[Scroll Debug v6] Started polling scrollElement.scrollTop directly');
-                                // Test if scroll event fires by manually triggering a test
-                                console.log('[Scroll Debug] Testing scroll event by programmatically scrolling to 1px...');
-                                scrollElement.scrollTop = 1;
-                                setTimeout(() => {
-                                    if (scrollElement.scrollTop === 1) {
-                                        console.log('[Scroll Debug] ✓ Scroll position changed successfully');
-                                        scrollElement.scrollTop = 0; // Reset
-                                    }
-                                    else {
-                                        console.warn('[Scroll Debug] ⚠️ Could not change scroll position - element may not be scrollable');
-                                    }
-                                }, 50);
                             }).catch((error) => {
-                                console.error('[Scroll Debug] Error getting Ionic scroll element:', error);
+                                console.error('Error getting Ionic scroll element:', error);
                             });
+                            return true;
                         }
                         else {
-                            console.warn('[Scroll Debug] ion-content does not have getScrollElement() method');
-                            // Fallback: attach to ion-content itself (may not work)
-                            container = element;
+                            // Fallback for older Ionic versions
+                            this.embeddedScrollContainer = element;
+                            this.tooltipService.setScrollContainer(element);
+                            element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
+                            return true;
                         }
                     }
                     else {
                         // Regular HTML element
-                        container = element;
-                        console.log('[Scroll Debug] Container dimensions:', {
-                            clientHeight: container.clientHeight,
-                            scrollHeight: container.scrollHeight,
-                            scrollTop: container.scrollTop,
-                            hasOverflow: container.scrollHeight > container.clientHeight
-                        });
+                        this.embeddedScrollContainer = element;
+                        this.tooltipService.setScrollContainer(element);
+                        element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
+                        return true;
                     }
+                };
+                // Try to set up immediately
+                if (!setupScrollContainer()) {
+                    // If not found, retry with delays (element might not be in DOM yet)
+                    let retries = 0;
+                    const maxRetries = 10;
+                    const retryInterval = setInterval(() => {
+                        retries++;
+                        if (setupScrollContainer() || retries >= maxRetries) {
+                            clearInterval(retryInterval);
+                            if (retries >= maxRetries) {
+                                console.warn(`Scroll container with id "${this.scrollContainerId()}" not found after ${maxRetries} retries.`);
+                            }
+                        }
+                    }, 100);
                 }
             }
             else if (this.dashboardContainer) {
                 // Fall back to internal dashboard container
                 container = this.dashboardContainer.nativeElement;
-                console.log('[Scroll Debug] Using internal dashboard container:', container);
-            }
-            // Only attach listener for non-Ionic elements (Ionic handled above)
-            if (container) {
-                console.log('[Scroll Debug] Attaching scroll listener to container');
+                this.embeddedScrollContainer = container;
+                this.tooltipService.setScrollContainer(container);
                 container.addEventListener('scroll', () => this.onContainerScroll(container), { passive: true });
             }
-            else if (!this.scrollContainerId() || document.getElementById(this.scrollContainerId())?.tagName.toLowerCase() !== 'ion-content') {
-                console.warn('[Scroll Debug] No scroll container found!');
-            }
-        }
-        else {
-            console.log('[Scroll Debug] Not in embedded mode, using window scroll');
         }
     }
     handleSearchResult(result) {
@@ -21732,66 +21713,42 @@ class SymphiqFunnelAnalysisDashboardComponent {
     }
     onContainerScroll(container) {
         if (!this.embedded()) {
-            console.log('[Scroll Debug] onContainerScroll called but not in embedded mode, returning');
             return;
         }
         const scrollPosition = container.scrollTop;
-        // Update scroll progress immediately for smooth bar animation
+        // Update scroll progress for smooth bar animation
         const containerHeight = container.clientHeight;
         const scrollHeight = container.scrollHeight;
         const maxScroll = scrollHeight - containerHeight;
         const progress = maxScroll > 0 ? (scrollPosition / maxScroll) * 100 : 0;
-        console.log('[Scroll Debug] Container scroll event:', {
-            scrollPosition,
-            containerHeight,
-            scrollHeight,
-            maxScroll,
-            progress: progress.toFixed(2) + '%',
-            currentScrollProgress: this.scrollProgress(),
-            isScrolled: this.isScrolled()
-        });
         this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
-        // Skip header state updates during programmatic scrolling
+        // Skip header state updates during programmatic scrolling or cooldown
         if (this.isProgrammaticScroll) {
-            console.log('[Scroll Debug] Skipping header update - programmatic scroll');
             return;
         }
-        // Check if we're in cooldown period after a recent state change
         const now = Date.now();
         const timeSinceLastChange = now - this.lastStateChangeTime;
         if (timeSinceLastChange < this.STATE_CHANGE_COOLDOWN) {
-            console.log('[Scroll Debug] Skipping header update - in cooldown period', timeSinceLastChange + 'ms');
             return;
         }
-        // Clear any pending timeout
         if (this.scrollTimeout) {
             clearTimeout(this.scrollTimeout);
         }
-        // Use hysteresis (two different thresholds) to prevent bounce loop
-        const COLLAPSE_THRESHOLD = 150;
-        const EXPAND_THRESHOLD = 100;
+        // Use hysteresis to prevent bounce
+        const COLLAPSE_THRESHOLD = 50;
+        const EXPAND_THRESHOLD = 30;
         const currentState = this.isScrolled();
-        // Determine new state based on current position and hysteresis logic
         let newState = currentState;
-        // If currently expanded and we scroll past collapse threshold, collapse
         if (!currentState && scrollPosition > COLLAPSE_THRESHOLD) {
             newState = true;
-            console.log('[Scroll Debug] Triggering COLLAPSE - scrollPosition:', scrollPosition, '> threshold:', COLLAPSE_THRESHOLD);
         }
-        // If currently collapsed and we scroll back above expand threshold, expand
         else if (currentState && scrollPosition < EXPAND_THRESHOLD) {
             newState = false;
-            console.log('[Scroll Debug] Triggering EXPAND - scrollPosition:', scrollPosition, '< threshold:', EXPAND_THRESHOLD);
         }
-        // Only update state if it actually changed
         if (newState !== currentState) {
-            console.log('[Scroll Debug] State change detected:', currentState, '->', newState);
             this.isScrolled.set(newState);
             this.lastStateChangeTime = Date.now();
         }
-        else {
-            console.log('[Scroll Debug] No state change needed. Current state:', currentState, 'Position:', scrollPosition);
-        }
         this.lastScrollPosition = scrollPosition;
     }
     onScroll() {
@@ -21820,11 +21777,11 @@ class SymphiqFunnelAnalysisDashboardComponent {
             clearTimeout(this.scrollTimeout);
         }
         // Use hysteresis (two different thresholds) to prevent bounce loop
-        // When scrolling down, collapse at 150px
-        // When scrolling up, expand at 100px
-        // This 50px gap prevents rapid toggling when hovering near a single threshold
-        const COLLAPSE_THRESHOLD = 150;
-        const EXPAND_THRESHOLD = 100;
+        // When scrolling down, collapse at 50px
+        // When scrolling up, expand at 30px
+        // This 20px gap prevents rapid toggling when hovering near a single threshold
+        const COLLAPSE_THRESHOLD = 50;
+        const EXPAND_THRESHOLD = 30;
         const currentState = this.isScrolled();
         // Determine new state based on current position and hysteresis logic
         let newState = currentState;
@@ -21859,48 +21816,60 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.lastScrollPosition = scrollPosition;
     }
     scrollToTop() {
-        // Set flag to prevent header state changes during smooth scroll
         this.isProgrammaticScroll = true;
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-        // Clear flag after smooth scroll completes
+        if (this.embedded() && this.embeddedScrollContainer) {
+            this.embeddedScrollContainer.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+        else {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
         setTimeout(() => {
             this.isProgrammaticScroll = false;
-            // At top of page, header should be expanded
             this.isScrolled.set(false);
         }, 800);
     }
     scrollToSection(sectionId) {
         const element = document.getElementById(sectionId);
-        if (element) {
-            // Use smaller offset for overall-section to stay below expand threshold
-            // Other sections use larger offset to stay above collapse threshold
-            const offset = sectionId === 'overall-section' ? 50 : 100;
+        if (!element)
+            return;
+        const offset = sectionId === 'overall-section' ? 50 : 100;
+        this.isProgrammaticScroll = true;
+        if (this.embedded() && this.embeddedScrollContainer) {
+            // For embedded mode: calculate relative scroll position
+            const elementTop = element.offsetTop;
+            const scrollTop = elementTop - offset;
+            this.embeddedScrollContainer.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth'
+            });
+        }
+        else {
+            // For window mode: use getBoundingClientRect
             const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
             const offsetPosition = elementPosition - offset;
-            // Set flag to prevent header state changes during smooth scroll
-            this.isProgrammaticScroll = true;
             window.scrollTo({
                 top: offsetPosition,
                 behavior: 'smooth'
             });
-            // Clear flag after smooth scroll completes (approximate duration)
-            setTimeout(() => {
-                this.isProgrammaticScroll = false;
-                // Manually set the correct header state after scroll completes
-                // Use hysteresis thresholds: collapse at 150px, expand below 100px
-                const finalPosition = window.scrollY;
-                if (finalPosition > 150) {
-                    this.isScrolled.set(true);
-                }
-                else if (finalPosition < 100) {
-                    this.isScrolled.set(false);
-                }
-                // If between 100-150, leave current state unchanged
-            }, 800);
         }
+        setTimeout(() => {
+            this.isProgrammaticScroll = false;
+            const finalPosition = this.embedded() && this.embeddedScrollContainer
+                ? this.embeddedScrollContainer.scrollTop
+                : window.scrollY;
+            if (finalPosition > 50) {
+                this.isScrolled.set(true);
+            }
+            else if (finalPosition < 30) {
+                this.isScrolled.set(false);
+            }
+        }, 800);
     }
     handleMobileNavigation(sectionId) {
         this.activeNavSection.set(sectionId);
@@ -21943,7 +21912,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }
         return value.toLocaleString('en-US', { maximumFractionDigits: 0 });
     }
-    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService)); }; }
+    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
             i0.ɵɵviewQuery(_c0$4, 5);
@@ -22157,7 +22126,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("isCompactMode", ctx.viewModeService.isCompact())("isExpanded", ctx.fabExpanded());
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("sections", ctx.navSections)("activeSection", ctx.activeNavSection());
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, OverallAssessmentComponent,
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, OverallAssessmentComponent,
             InsightCardComponent,
             MetricCardComponent,
             BreakdownSectionComponent,
@@ -22944,7 +22913,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
 
     </div>
   `, styles: [":host{display:block;min-height:100%}.bg-gradient-radial{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid{grid-template-columns:repeat(6,1fr)}}.bento-small{grid-column:span 2;grid-row:span 1}.bento-medium{grid-column:span 3;grid-row:span 1}.bento-large{grid-column:span 4;grid-row:span 1}.bento-featured{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small,.bento-medium,.bento-large,.bento-featured{grid-column:span 1}}.masonry-grid{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid{column-count:2}}@media (min-width: 1280px){.masonry-grid{column-count:3}}.masonry-grid>div{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured{column-span:all}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up{animation-duration:.4s}}\n"] }]
-    }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }], { modalComponent: [{
+    }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }], { modalComponent: [{
             type: ViewChild,
             args: [ModalComponent]
         }], dashboardContainer: [{
@@ -22954,7 +22923,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 915 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 916 }); })();
 
 /**
  * Shared Theme Color Utilities