Theme: fix tooltip position when not using top position

GibbonEdu · Nov 17, 2024 · b720e55 · b720e55
1 parent 128b32e
commit b720e55
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/resources/assets/css/core.min.css b/resources/assets/css/core.min.css
diff --git a/resources/assets/js/core.js b/resources/assets/js/core.js
@@ -45,7 +45,7 @@ document.addEventListener('alpine:init', () => {
         }
 
         let tooltipHTML = `
-            <template x-teleport="body"><div id="${tooltipId}" x-cloak x-data="{ tooltipVisible: false, tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-1.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute pointer-events-none max-w-sm text-sm font-normal" style="z-index: 100;" >
+            <template x-teleport="body"><div id="${tooltipId}" x-cloak x-data="{ tooltipVisible: false, tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-1.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 ' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5  ' : tooltipPosition == 'right' }" class="absolute pointer-events-none max-w-sm text-sm font-normal" style="z-index: 100;" >
             
                 <div x-show="tooltipVisible" class="relative px-2 py-1 text-white bg-black bg-opacity-80 backdrop-blur-lg backdrop-contrast-125 backdrop-saturate-150 rounded-md"
                     x-transition:enter="transition delay-75 ease-out duration-200"
@@ -70,14 +70,25 @@ document.addEventListener('alpine:init', () => {
                 currentTooltip.dispatchEvent(new Event('mouseleave'));
             }
             if (!tooltipActive) {
-                var elPos = el.getBoundingClientRect();
+                var elRect = el.getBoundingClientRect();
 
                 el.insertAdjacentHTML('beforeend', tooltipHTML);
                 setTimeout(function(){
                     var tooltip = document.getElementById(tooltipId);
                     if (tooltip != null) {
-                        tooltip.style.top = (elPos.top + window.scrollY )+"px";
-                        tooltip.style.left = (elPos.left + window.scrollX + (elPos.width/2.0))+"px";
+                        if (tooltipPosition == 'top') {
+                            tooltip.style.top = (elRect.top + window.scrollY )+"px";
+                            tooltip.style.left = (elRect.left + window.scrollX + (elRect.width/2.0))+"px";
+                        } else if (tooltipPosition == 'bottom') {
+                            tooltip.style.top = (elRect.bottom + window.scrollY + elRect.height )+"px";
+                            tooltip.style.left = (elRect.left + window.scrollX + (elRect.width/2.0))+"px";
+                        } else if (tooltipPosition == 'left') {
+                            tooltip.style.top = (elRect.top + window.scrollY + (elRect.height/2.0))+"px";
+                            tooltip.style.left = (elRect.left + window.scrollX - 12  )+"px";
+                        } else if (tooltipPosition == 'right') {
+                            tooltip.style.top = (elRect.top + window.scrollY + (elRect.height/2.0))+"px";
+                            tooltip.style.left = (elRect.right + window.scrollX + 12  )+"px";
+                        }
                     }
                 }, 50);
 

diff --git a/resources/assets/js/core.min.js b/resources/assets/js/core.min.js
diff --git a/themes/Default/css/main.css b/themes/Default/css/main.css
@@ -169,15 +169,6 @@ table td {
     /* border-left: 1px solid #dfdfdf; */
 }
 
-.odd,
-table.colorOddEven tr:not([class]) {
-    /* background-color: #fefefe; */
-}
-.even,
-table.colorOddEven tr:nth-of-type(odd):not([class]) {
-    /* background-color: #f9f9f9; */
-}
-
 table tr:last-child > td {
     border-bottom: 0;
 }
@@ -233,9 +224,7 @@ table.smallIntBorder td {
     border-left: none !important ;
     padding: 0.5rem !important ;
 }
-table.smallIntBorder td:last-child {
-    /* text-align: left; */
-}
+
 tr.break td {
     background-color: #eaebec;
 }
@@ -288,7 +277,7 @@ textarea[disabled] {
     --tw-border-opacity: 0.5;
     --tw-ring-opacity: 0.5;
     --tw-text-opacity: 0.5;
-} */
+}
 
 /* PAGINATION */