fix: Tooltip: Don't close if user hovers on opener then tooltip conte…

…nt (#5320)

* fix: Tooltip: Don't close if user hovers on opener then tooltip content

* increase timeout slightly, clean up

* use private var

* fix issue with filter-tags

* move listeners into render

* code review feedback: rename leftTooltip, use arrow function, add clearTimeout

* fix tests; run resetDelayTimeout from mouseleave listeners only if already showing

components/tooltip/tooltip.js

@@ -451,6 +451,9 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._isHovering = false;
 		this._resizeRunSinceTruncationCheck = false;
 		this._viewportMargin = defaultViewportMargin;
+
+		this.#isHoveringTooltip = false;
+		this.#mouseLeftTooltip = false;
 	}
 
 	/** @ignore */
@@ -525,7 +528,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		return html`
 			<div class="d2l-tooltip-container">
 				<div class="d2l-tooltip-position" style=${styleMap(tooltipPositionStyle)}>
-					<div class="${classMap(contentClasses)}">
+					<div class="${classMap(contentClasses)}" @mouseenter="${this.#onTooltipMouseEnter}" @mouseleave="${this.#onTooltipMouseLeave}">
 						<div role="text">
 							<slot></slot>
 						</div>
@@ -534,7 +537,7 @@ class Tooltip extends RtlMixin(LitElement) {
 				<div class="d2l-tooltip-pointer d2l-tooltip-pointer-outline">
 					<div></div>
 				</div>
-				<div class="d2l-tooltip-pointer">
+				<div class="d2l-tooltip-pointer" @mouseenter="${this.#onTooltipMouseEnter}" @mouseleave="${this.#onTooltipMouseLeave}">
 					<div></div>
 				</div>
 			</div>`
@@ -647,6 +650,9 @@ class Tooltip extends RtlMixin(LitElement) {
 		this.style.height = `${positionRect.height}px`;
 	}
 
+	#isHoveringTooltip;
+	#mouseLeftTooltip;
+
 	_addListeners() {
 		if (!this._target) {
 			return;
@@ -842,6 +848,12 @@ class Tooltip extends RtlMixin(LitElement) {
 	}
 
 	_onTargetMouseEnter() {
+		// came from tooltip so keep showing
+		if (this.#mouseLeftTooltip) {
+			this._isHovering = true;
+			return;
+		}
+
 		this._hoverTimeout = setTimeout(async() => {
 			if (this.showTruncatedOnly) {
 				await this._updateTruncating();
@@ -856,7 +868,8 @@ class Tooltip extends RtlMixin(LitElement) {
 	_onTargetMouseLeave() {
 		clearTimeout(this._hoverTimeout);
 		this._isHovering = false;
-		this._updateShowing();
+		if (this.showing) resetDelayTimeout();
+		setTimeout(() => this._updateShowing(), 100); // delay to allow for mouseenter to fire if hovering on tooltip
 	}
 
 	_onTargetResize() {
@@ -925,7 +938,6 @@ class Tooltip extends RtlMixin(LitElement) {
 				this._dismissibleId = null;
 			}
 			if (dispatch) {
-				resetDelayTimeout();
 				this.dispatchEvent(new CustomEvent(
 					'd2l-tooltip-hide', { bubbles: true, composed: true }
 				));
@@ -934,7 +946,7 @@ class Tooltip extends RtlMixin(LitElement) {
 	}
 
 	_updateShowing() {
-		this.showing = this._isFocusing || this._isHovering || this.forceShow;
+		this.showing = this._isFocusing || this._isHovering || this.forceShow || this.#isHoveringTooltip;
 	}
 
 	_updateTarget() {
@@ -1009,5 +1021,24 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._resizeRunSinceTruncationCheck = false;
 		target.removeChild(cloneContainer);
 	}
+
+	#onTooltipMouseEnter() {
+		if (!this.showing) return;
+		this.#isHoveringTooltip = true;
+		this._updateShowing();
+	}
+
+	#onTooltipMouseLeave() {
+		clearTimeout(this._mouseLeaveTimeout);
+
+		this.#isHoveringTooltip = false;
+		this.#mouseLeftTooltip = true;
+		resetDelayTimeout();
+
+		this._mouseLeaveTimeout = setTimeout(() => {
+			this.#mouseLeftTooltip = false;
+			this._updateShowing();
+		}, 100); // delay to allow for mouseenter to fire if hovering on target
+	}
 }
 customElements.define('d2l-tooltip', Tooltip);