fix: tooltip: Tooltip delay should be reset on close (#5336)

* fix: tooltip: Tooltip delay should be reset on close

* fix unit tests, add unit test

Author: margaree

components/tooltip/test/tooltip.test.js

@@ -261,6 +261,37 @@ describe('d2l-tooltip', () => {
 			await oneEvent(tooltipFixture, 'd2l-tooltip-show');
 			expect(tooltip.showing).to.be.true;
 		});
+
+		it('should show second tooltip without delay after hovering over first tooltip for greater than delay', async() => {
+			const doubleTooltipFixture = html`
+				<div>
+					<button id="explicit-target1">Hover me for tips</button>
+					<d2l-tooltip for="explicit-target1" for-type="descriptor">If I got a problem then a problem's got a problem.</d2l-tooltip>
+					<button id="explicit-target2">Hover me for tips</button>
+					<d2l-tooltip for="explicit-target2" for-type="descriptor">There might be another problem.</d2l-tooltip>
+				</div>
+			`;
+
+			const testFixture = await fixture(doubleTooltipFixture);
+
+			const target1 = testFixture.querySelector('#explicit-target1');
+			const target2 = testFixture.querySelector('#explicit-target2');
+
+			const tooltips = testFixture.querySelectorAll('d2l-tooltip');
+			const tooltip1 = tooltips[0];
+			const tooltip2 = tooltips[1];
+
+			// display tooltip 1 then leave
+			target1.dispatchEvent(new Event('mouseenter'));
+			await oneEvent(testFixture, 'd2l-tooltip-show');
+			expect(tooltip1.showing).to.be.true;
+			target1.dispatchEvent(new Event('mouseleave'));
+
+			// don't wait delay, enter target2, tooltip 2 should show without having to wait for delay
+			target2.dispatchEvent(new Event('mouseenter'));
+			await aTimeout(tooltip.delay / 2);
+			expect(tooltip2.showing).to.be.true;
+		});
 	});
 
 	describe('force-show', () => {

components/tooltip/tooltip.js

@@ -29,12 +29,13 @@ const contentBorderSize = 1;
 const contentHorizontalPadding = 15;
 const outlineSize = 1;
 
-/* once a user shows a tooltip, ignore delay if they hover adjacent target within this timeout */
+/* once a user closes a tooltip, ignore delay if they hover adjacent target within this timeout */
 let delayTimeoutId;
 const resetDelayTimeout = () => {
 	if (delayTimeoutId) clearTimeout(delayTimeoutId);
 	delayTimeoutId = setTimeout(() => delayTimeoutId = null, 1000);
 };
+/* ignore delay if user hovers adjacent target when a tooltip is already open */
 const getDelay = delay => {
 	if (delayTimeoutId) return 0;
 	else return delay;
@@ -847,7 +848,6 @@ class Tooltip extends RtlMixin(LitElement) {
 				if (!this._truncating) return;
 			}
 
-			resetDelayTimeout();
 			this._isHovering = true;
 			this._updateShowing();
 		}, getDelay(this.delay));
@@ -925,6 +925,7 @@ class Tooltip extends RtlMixin(LitElement) {
 				this._dismissibleId = null;
 			}
 			if (dispatch) {
+				resetDelayTimeout();
 				this.dispatchEvent(new CustomEvent(
 					'd2l-tooltip-hide', { bubbles: true, composed: true }
 				));