Fixes #16922

The styling was applied before the position was updated which caused
both `mouseenter` and `mouseleave` to be fired in fairly rapid
succession

Author: brianjhanson

src/web/assets/cp/src/js/CraftTooltip.js

@@ -168,6 +168,7 @@ class CraftTooltip extends HTMLElement {
   };
 
   handleMouseEnter = () => {
+    console.log('mouseenter');
     this.isHovering = true;
 
     if (this.delayTimeout) {
@@ -186,6 +187,7 @@ class CraftTooltip extends HTMLElement {
   };
 
   handleMouseLeave = () => {
+    console.log('mouseleave');
     this.isHovering = false;
 
     if (this.delayTimeout) {
@@ -250,6 +252,7 @@ class CraftTooltip extends HTMLElement {
   };
 
   show = () => {
+    autoUpdate(this.triggerElement, this.tooltip, this.update);
     Object.assign(this.tooltip.style, {
       opacity: 1,
       transform: ['left', 'right'].includes(this.getStaticSide())
@@ -259,8 +262,6 @@ class CraftTooltip extends HTMLElement {
       pointerEvents: 'auto',
       zIndex: 101,
     });
-
-    autoUpdate(this.triggerElement, this.tooltip, this.update);
     this.showing = true;
   };