Revert "Revert "When PopOverButton popover opens, close tooltip on the same element" (#7941)"

This reverts commit 473e73c, reversing
changes made to de3d02d.

Author: sdvg

packages/components/src/components/button/component.tsx

@@ -67,19 +67,22 @@ import clsx from 'clsx';
 export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolButtonWcElement;
 	private buttonRef?: HTMLButtonElement;
+	private tooltipRef?: HTMLKolTooltipWcElement;
 
 	private readonly internalDescriptionById = nonce();
 
-	private readonly catchRef = (ref?: HTMLButtonElement) => {
-		this.buttonRef = ref;
-	};
-
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
 	public async kolFocus() {
 		this.buttonRef?.focus();
 	}
 
+	@Method()
+	// eslint-disable-next-line @typescript-eslint/require-await
+	public async hideTooltip() {
+		void this.tooltipRef?.hideTooltip();
+	}
+
 	private readonly onClick = (event: MouseEvent) => {
 		if (this.state._type === 'submit') {
 			propagateSubmitEventToForm({
@@ -122,7 +125,7 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 		return (
 			<Host>
 				<button
-					ref={this.catchRef}
+					ref={(ref) => (this.buttonRef = ref)}
 					accessKey={this.state._accessKey || undefined}
 					aria-controls={this.state._ariaControls}
 					aria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}
@@ -158,6 +161,7 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 					</KolSpanFc>
 				</button>
 				<KolTooltipWcTag
+					ref={(ref) => (this.tooltipRef = ref)}
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.

packages/components/src/components/popover-button/component.tsx

@@ -60,11 +60,15 @@ export class KolPopoverButton implements PopoverButtonProps {
 				// Reset the flag after the event loop tick.
 				this.justClosed = false;
 			}, 10); // timeout of 0 should be sufficient but doesn't work in Safari Mobile (needs further investigation).
-		} else if (this.refPopover) {
-			/**
-			 * Avoid "flicker" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.
-			 */
-			this.refPopover.style.visibility = 'hidden';
+		} else {
+			if (this.refPopover) {
+				/**
+				 * Avoid "flicker" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.
+				 */
+				this.refPopover.style.visibility = 'hidden';
+			}
+
+			void this.refButton?.hideTooltip();
 		}
 	}
 

packages/components/src/components/popover-button/popover-button.e2e.ts

@@ -37,4 +37,20 @@ test.describe('kol-popover-button', () => {
 		await button.click({ force: true });
 		await expect(popover).not.toBeVisible();
 	});
+
+	test('should hide its tooltip when popover is shown', async ({ page }) => {
+		await page.setContent(`
+			<kol-popover-button _label="Toggle popover" _icons="codicon codicon-info" _hide-label>
+				Popover content
+			</kol-popover-button>
+		`);
+		const button = page.getByTestId('popover-button').locator('button');
+		const tooltip = page.locator('kol-tooltip-wc');
+
+		await button.hover();
+		await expect(tooltip).toBeVisible();
+
+		await button.click();
+		await expect(tooltip).not.toBeVisible();
+	});
 });

packages/components/src/components/tooltip/component.tsx

@@ -2,12 +2,16 @@ import { autoUpdate } from '@floating-ui/dom';
 import type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';
 import { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';
 import type { JSX } from '@stencil/core';
+import { Method } from '@stencil/core';
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 import { hideOverlay, showOverlay } from '../../utils/overlay';
 import { KolSpanFc } from '../../functional-components';
 
+// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/
+const TOOLTIP_DELAY = 300;
+
 /**
  * @internal
  */
@@ -21,8 +25,6 @@ export class KolTooltipWc implements TooltipAPI {
 	private arrowElement?: HTMLDivElement;
 	private previousSibling?: Element | null;
 	private tooltipElement?: HTMLDivElement;
-	private hasFocusIn = false;
-	private hasMouseIn = false;
 
 	private cleanupAutoPositioning?: () => void;
 
@@ -51,7 +53,26 @@ export class KolTooltipWc implements TooltipAPI {
 		}
 	};
 
-	private hideTooltip = (): void => {
+	private showTooltipTimeout?: ReturnType<typeof setTimeout>;
+	private showTooltipWithDelay = (): void => {
+		clearTimeout(this.showTooltipTimeout);
+		this.showTooltipTimeout = setTimeout(() => {
+			this.showTooltip();
+		}, TOOLTIP_DELAY);
+	};
+
+	private hideTooltipTimeout?: ReturnType<typeof setTimeout>;
+	private hideTooltipWithDelay = (): void => {
+		clearTimeout(this.hideTooltipTimeout);
+		this.hideTooltipTimeout = setTimeout(() => {
+			void this.hideTooltip();
+		}, TOOLTIP_DELAY);
+	};
+
+	@Method()
+	// eslint-disable-next-line @typescript-eslint/require-await
+	public async hideTooltip() {
+		clearTimeout(this.showTooltipTimeout); // Cancel scheduled tooltips
 		if (this.tooltipElement /* SSR instanceof HTMLElement */) {
 			hideOverlay(this.tooltipElement);
 			this.tooltipElement.style.setProperty('display', 'none');
@@ -62,29 +83,25 @@ export class KolTooltipWc implements TooltipAPI {
 			}
 		}
 		getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
-	};
+	}
 
 	private hideTooltipByEscape = (event: KeyboardEvent): void => {
 		if (event.key === 'Escape') {
-			this.hideTooltip();
+			void this.hideTooltip();
 		}
 	};
 
 	private handleMouseEnter() {
-		this.hasMouseIn = true;
-		this.showOrHideTooltip();
+		this.showTooltipWithDelay();
 	}
 	private handleMouseleave() {
-		this.hasMouseIn = false;
-		this.showOrHideTooltip();
+		this.hideTooltipWithDelay();
 	}
 	private handleFocusIn() {
-		this.hasFocusIn = true;
-		this.showOrHideTooltip();
+		this.showTooltipWithDelay();
 	}
 	private handleFocusout() {
-		this.hasFocusIn = false;
-		this.showOrHideTooltip();
+		this.hideTooltipWithDelay();
 	}
 
 	private addListeners = (el: Element): void => {
@@ -183,20 +200,6 @@ export class KolTooltipWc implements TooltipAPI {
 		});
 	}
 
-	private overFocusTimeout?: ReturnType<typeof setTimeout>;
-
-	private showOrHideTooltip = (): void => {
-		clearTimeout(this.overFocusTimeout);
-		this.overFocusTimeout = setTimeout(() => {
-			if (this.hasMouseIn || this.hasFocusIn) {
-				this.showTooltip();
-			} else {
-				this.hideTooltip();
-			}
-			// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/
-		}, 300);
-	};
-
 	public componentWillLoad(): void {
 		this.validateBadgeText(this._badgeText);
 		this.validateAlign(this._align);