chore: fixed tooltips miss-alignment

browser-automation · Mar 27, 2024 · 8f87885 · 8f87885
1 parent e53d46c
commit 8f87885
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/cba-tooltip/cba-tooltip.js b/src/cba-tooltip/cba-tooltip.js
@@ -88,12 +88,13 @@ class List extends HTMLElement
     const hostElement = this.getRootNode().host;
     const viewportWidth = hostElement ? hostElement.clientWidth :  document.documentElement.clientWidth;
     const viewportHeight = hostElement ? hostElement.clientHeight : document.documentElement.clientHeight;
+    const distanceTop = hostElement ? clientRect.top - hostElement.getBoundingClientRect().top : clientRect.top;
     const distanceLeft = clientRect.left;
-    const clientVerticalCenter = clientRect.top + clientRect.height / 2;
-    const viewoirtVerticalCenter = viewportHeight / 2;
+    const clientVerticalCenter = distanceTop + clientRect.height / 2;
+    const viewportVerticalCenter = viewportHeight / 2;
     const distanceRight = viewportWidth - clientRect.right;
     const placementX = distanceLeft - distanceRight > 0 ? "left" : "right";
-    const placementY = viewoirtVerticalCenter > clientVerticalCenter ? "top" : "bottom";
+    const placementY = viewportVerticalCenter > clientVerticalCenter ? "bottom" : "top";
     this.tooltipElem.dataset.tooltip = `${placementX}-${placementY}`;
   }
 

diff --git a/tests/smoke/cba-list/smoke.js b/tests/smoke/cba-list/smoke.js
@@ -43,12 +43,29 @@ const items = [
 
 for (let i = 4; i < 20; i++)
 {
-  items.push({
+  const item = {
     id: `row${i}`,
     data: `Info`,
     text: `List${i}`
-  });
+  }
+  if (i === 10)
+  {
+    item.alert = {
+      text: "Middle Alert text",
+      type: "error"
+    }
+  }
+  items.push(item);
 }
+items.push({
+  id: "row20",
+  data: "Info",
+  text: "List20",
+  alert: {
+    text: "Bottom Alert text",
+    type: "error"
+  }
+});
 cbaList.items = items;
 
 const cbaSortableList = document.querySelector("#sortable");