Refactor a bit for better hover

craftcms · Mar 1, 2024 · cf1123e · cf1123e
1 parent db9dce0
commit cf1123e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/web/assets/cp/src/css/_craft-tooltip.scss b/src/web/assets/cp/src/css/_craft-tooltip.scss
@@ -3,26 +3,31 @@ craft-tooltip {
   white-space: normal;
   opacity: 0;
   transform: translateY(-4px);
+  width: max-content;
+  max-width: 240px;
   transition:
     opacity 100ms ease-in-out,
     transform 150ms ease-in-out;
+  top: 0;
+  left: 0;
+  z-index: 99;
+}
+
+craft-tooltip > .inner {
+  position: relative;
+  display: inline-block;
   background-color: var(--white);
   color: var(--gray-700);
   border: 1px solid var(--dark-hairline-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   border-radius: var(--medium-border-radius);
-  width: max-content;
-  max-width: 220px;
   padding: var(--xs) var(--s);
   pointer-events: none;
   user-select: none;
-  top: 0;
-  left: 0;
-  z-index: 99;
   font-weight: 400;
 }
 
-craft-tooltip > .arrow {
+craft-tooltip .arrow {
   position: absolute;
   background: var(--white);
   width: 8px;

diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -2865,6 +2865,7 @@ table {
         padding-top: 7px;
         padding-bottom: 7px;
         background-clip: padding-box;
+        max-width: 33vw;
       }
 
       td {
@@ -3089,7 +3090,7 @@ table {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--thumb-size);
+    min-width: var(--thumb-size);
     height: var(--thumb-size);
 
     &.rounded {

diff --git a/src/web/assets/cp/src/js/CraftTooltip.js b/src/web/assets/cp/src/js/CraftTooltip.js
@@ -19,14 +19,15 @@ import {arrow, computePosition, flip, offset, shift} from '@floating-ui/dom';
  */
 class CraftTooltip extends HTMLElement {
   connectedCallback() {
-    this.arrowElement = null;
+    this.arrowElement = this.querySelector('.arrow');
 
     this.arrow = this.getAttribute('arrow') !== 'false';
     this.offset = this.hasAttribute('offset')
       ? parseInt(this.getAttribute('offset'), 10)
-      : 4;
+      : 8;
 
-    if (this.arrow) {
+    if (this.arrow && !this.arrowElement) {
+      this.renderInner();
       this.renderArrow();
     }
 
@@ -63,10 +64,25 @@ class CraftTooltip extends HTMLElement {
     }
   }
 
+  /**
+   * Renders an inner container so we can use padding for the offset and
+   * maintain a better hover experience for users using zoom.
+   */
+  renderInner() {
+    this.inner = document.createElement('span');
+    this.inner.classList.add('inner');
+    this.inner.innerText = this.innerText;
+
+    // Replace the content with the inner container
+    this.innerHTML = '';
+    this.appendChild(this.inner);
+    this.style.paddingTop = `${this.offset}px`;
+  }
+
   renderArrow() {
     this.arrowElement = document.createElement('span');
     this.arrowElement.classList.add('arrow');
-    this.appendChild(this.arrowElement);
+    this.inner.appendChild(this.arrowElement);
   }
 
   show() {
@@ -94,7 +110,7 @@ class CraftTooltip extends HTMLElement {
       middleware: [
         flip(),
         shift({padding: 10}),
-        offset(this.offset),
+        offset(0),
         ...(this.arrow ? [arrow({element: this.arrowElement})] : []),
       ],
     }).then(({x, y, middlewareData, placement}) => {