@eric-emg/symphiq-components 1.2.58 → 1.2.59

package/fesm2022/symphiq-components.mjs

@@ -193,35 +193,48 @@ class TooltipService {
         // 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;
+        // Calculate effective boundaries
+        let leftBound = 0;
+        let rightBound = window.innerWidth;
+        let topBound = 0;
+        let bottomBound = window.innerHeight;
+        // If there's a scroll container, adjust boundaries relative to it
+        if (this.scrollContainer) {
+            const containerRect = this.scrollContainer.getBoundingClientRect();
+            leftBound = containerRect.left;
+            rightBound = containerRect.right;
+            topBound = containerRect.top;
+            bottomBound = containerRect.bottom;
+        }
+        // Calculate space available around target element
+        const spaceLeft = targetRect.left - leftBound;
+        const spaceRight = rightBound - targetRect.right;
+        const spaceTop = targetRect.top - topBound;
+        const spaceBelow = bottomBound - targetRect.bottom;
         // Check left edge
-        if (position === 'left' && targetRect.left < HORIZONTAL_THRESHOLD) {
+        if (position === 'left' && spaceLeft < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'right';
         }
         // Check right edge
-        if (position === 'right' && (viewportWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
+        if (position === 'right' && spaceRight < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'left';
         }
         // Check top edge
-        if (position === 'top' && targetRect.top < VERTICAL_THRESHOLD) {
+        if (position === 'top' && spaceTop < VERTICAL_THRESHOLD) {
             adjustedPosition = 'bottom';
         }
         // Check bottom edge - prioritize flipping to top if not enough space
-        if (position === 'bottom' && (viewportHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
+        if (position === 'bottom' && spaceBelow < VERTICAL_THRESHOLD) {
             adjustedPosition = 'top';
         }
         // Smart auto-detection for 'top' position tooltips near bottom
         if (position === 'top') {
-            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
-            if (spaceBelow > spaceAbove && spaceBelow > VERTICAL_THRESHOLD) {
+            if (spaceBelow > spaceTop && spaceBelow > VERTICAL_THRESHOLD) {
                 adjustedPosition = 'bottom';
             }
-            else if (spaceAbove < VERTICAL_THRESHOLD && spaceBelow > VERTICAL_THRESHOLD) {
+            else if (spaceTop < VERTICAL_THRESHOLD && spaceBelow > VERTICAL_THRESHOLD) {
                 adjustedPosition = 'bottom';
             }
         }
@@ -11144,17 +11157,25 @@ class TooltipContainerComponent {
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
         const container = this.scrollContainer();
-        const viewportWidth = container?.clientWidth || window.innerWidth;
+        // Calculate effective viewport boundaries
+        let leftBound = 10;
+        let rightBound = window.innerWidth - 10;
+        // If there's a scroll container, constrain to its boundaries
+        if (container) {
+            const containerRect = container.getBoundingClientRect();
+            leftBound = Math.max(10, containerRect.left + 10);
+            rightBound = Math.min(window.innerWidth - 10, containerRect.right - 10);
+        }
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
             let leftPos = mousePos.x;
-            // Keep tooltip in viewport
-            if (leftPos - halfWidth < 10) {
-                leftPos = halfWidth + 10;
+            // Keep tooltip in bounds
+            if (leftPos - halfWidth < leftBound) {
+                leftPos = leftBound + halfWidth;
             }
-            else if (leftPos + halfWidth > viewportWidth - 10) {
-                leftPos = viewportWidth - halfWidth - 10;
+            else if (leftPos + halfWidth > rightBound) {
+                leftPos = rightBound - halfWidth;
             }
             return leftPos;
         }
@@ -11163,16 +11184,16 @@ class TooltipContainerComponent {
             case 'bottom': {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
-                // Check if centered tooltip would go off screen
-                const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
+                // Check if centered tooltip would go off bounds
+                const wouldGoOffLeft = centerPosition - halfWidth < leftBound;
+                const wouldGoOffRight = centerPosition + halfWidth > rightBound;
                 if (wouldGoOffLeft) {
-                    // Align to left edge with padding
-                    return 10;
+                    // Align to left bound
+                    return leftBound;
                 }
                 else if (wouldGoOffRight) {
-                    // Align to right edge with padding
-                    return viewportWidth - tooltipWidth - 10;
+                    // Align to right bound
+                    return rightBound - tooltipWidth;
                 }
                 else {
                     // Center normally (transform will be applied)
@@ -11181,17 +11202,25 @@ class TooltipContainerComponent {
             }
             case 'left': {
                 const leftPosition = rect.left - tooltipWidth - 8;
-                // If tooltip would go off left edge, position it to the right instead
-                if (leftPosition < 10) {
-                    return rect.right + 8;
+                // If tooltip would go off left bound, position it to the right instead
+                if (leftPosition < leftBound) {
+                    const rightPosition = rect.right + 8;
+                    if (rightPosition + tooltipWidth > rightBound) {
+                        return leftBound;
+                    }
+                    return rightPosition;
                 }
                 return leftPosition;
             }
             case 'right': {
                 const rightPosition = rect.right + 8;
-                // If tooltip would go off right edge, position it to the left instead
-                if (rightPosition + tooltipWidth > viewportWidth - 10) {
-                    return rect.left - tooltipWidth - 8;
+                // If tooltip would go off right bound, position it to the left instead
+                if (rightPosition + tooltipWidth > rightBound) {
+                    const leftPosition = rect.left - tooltipWidth - 8;
+                    if (leftPosition < leftBound) {
+                        return leftBound;
+                    }
+                    return leftPosition;
                 }
                 return rightPosition;
             }
@@ -11207,7 +11236,15 @@ class TooltipContainerComponent {
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
         const container = this.scrollContainer();
-        const viewportHeight = container?.clientHeight || window.innerHeight;
+        // Calculate effective viewport boundaries
+        let topBound = 10;
+        let bottomBound = window.innerHeight - 10;
+        // If there's a scroll container, constrain to its boundaries
+        if (container) {
+            const containerRect = container.getBoundingClientRect();
+            topBound = Math.max(10, containerRect.top + 10);
+            bottomBound = Math.min(window.innerHeight - 10, containerRect.bottom - 10);
+        }
         // Estimate tooltip height based on type
         let estimatedHeight = 100;
         if (type === 'insight') {
@@ -11220,29 +11257,29 @@ class TooltipContainerComponent {
         if (position === 'auto' && mousePos) {
             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 > viewportHeight - 10) {
+            // If tooltip would go off bottom, position above cursor
+            if (topPos + estimatedHeight > bottomBound) {
                 topPos = mousePos.y - estimatedHeight - offset;
             }
             // Ensure it doesn't go off top
-            if (topPos < 10) {
-                topPos = 10;
+            if (topPos < topBound) {
+                topPos = topBound;
             }
             return topPos;
         }
         switch (position) {
             case 'top': {
                 const topPosition = rect.top - estimatedHeight - 8;
-                // If tooltip would go off top of screen, position it below instead
-                if (topPosition < 10) {
+                // If tooltip would go off top bound, position it below instead
+                if (topPosition < topBound) {
                     return rect.bottom + 8;
                 }
                 return topPosition;
             }
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
-                // If tooltip would go off bottom of screen, position it above instead
-                if (bottomPosition + estimatedHeight > viewportHeight - 10) {
+                // If tooltip would go off bottom bound, position it above instead
+                if (bottomPosition + estimatedHeight > bottomBound) {
                     return rect.top - estimatedHeight - 8;
                 }
                 return bottomPosition;
@@ -11250,9 +11287,9 @@ class TooltipContainerComponent {
             case 'left':
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
-                // Keep within viewport
-                const maxTop = viewportHeight - estimatedHeight - 10;
-                return Math.max(10, Math.min(centerPosition, maxTop));
+                // Keep within bounds
+                const maxTop = bottomBound - estimatedHeight;
+                return Math.max(topBound, Math.min(centerPosition, maxTop));
             }
             default:
                 return rect.top - estimatedHeight - 8;