fix(core): coordinate interest and popover interactions

johnyanarella · johnyanarella · commit 6f402560cba5 · 2026-07-08T12:42:50.000-07:00
Signed-off-by: John Yanarella &lt;jyanarella@nvidia.com&gt;
diff --git a/projects/core/src/alert/alert.test.lighthouse.ts b/projects/core/src/alert/alert.test.lighthouse.ts
@@ -16,7 +16,7 @@ describe('alert lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(23.3);
+    expect(report.payload.javascript.kb).toBeLessThan(23.4);
   });
 
   test('alert-group should meet lighthouse benchmarks', async () => {
@@ -33,6 +33,6 @@ describe('alert lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(23.3);
+    expect(report.payload.javascript.kb).toBeLessThan(23.4);
   });
 });
diff --git a/projects/core/src/combobox/combobox.test.lighthouse.ts b/projects/core/src/combobox/combobox.test.lighthouse.ts
@@ -25,7 +25,7 @@ describe('combobox lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(36.1);
+    expect(report.payload.javascript.kb).toBeLessThan(36.2);
   });
 
   test('combobox multi select with large dataset should meet lighthouse benchmarks', async () => {
diff --git a/projects/core/src/copy-button/copy-button.test.lighthouse.ts b/projects/core/src/copy-button/copy-button.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('copy-button lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(26);
+    expect(report.payload.javascript.kb).toBeLessThan(26.2);
   });
 });
diff --git a/projects/core/src/datetime/datetime.test.lighthouse.ts b/projects/core/src/datetime/datetime.test.lighthouse.ts
@@ -19,6 +19,6 @@ describe('datetime lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.5);
+    expect(report.payload.javascript.kb).toBeLessThan(25.6);
   });
 });
diff --git a/projects/core/src/dialog/dialog.test.lighthouse.ts b/projects/core/src/dialog/dialog.test.lighthouse.ts
@@ -25,6 +25,6 @@ describe('dialog lighthouse report', () => {
     expect(report.scores.performance).toBeGreaterThan(97); // bfcache
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(24.9);
+    expect(report.payload.javascript.kb).toBeLessThan(25);
   });
 });
diff --git a/projects/core/src/drawer/drawer.test.lighthouse.ts b/projects/core/src/drawer/drawer.test.lighthouse.ts
@@ -18,6 +18,6 @@ describe('drawer lighthouse report', () => {
     expect(report.scores.performance).toBeGreaterThan(98); // bfcache
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.4);
+    expect(report.payload.javascript.kb).toBeLessThan(25.5);
   });
 });
diff --git a/projects/core/src/icon-button/icon-button.test.lighthouse.ts b/projects/core/src/icon-button/icon-button.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('icon-button lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(19.5);
+    expect(report.payload.javascript.kb).toBeLessThan(19.6);
   });
 });
diff --git a/projects/core/src/index.test.lighthouse.ts b/projects/core/src/index.test.lighthouse.ts
@@ -15,7 +15,7 @@ describe('lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.requests['index.js'].kb).toBeLessThan(130.5);
+    expect(report.payload.javascript.requests['index.js'].kb).toBeLessThan(130.6);
 
     // if sudden drop in size, check vite bundle config and bundle demo to ensure side effects are properly preserved
     expect(report.payload.javascript.requests['index.js'].kb).toBeGreaterThan(120);
diff --git a/projects/core/src/menu/menu.test.lighthouse.ts b/projects/core/src/menu/menu.test.lighthouse.ts
@@ -21,6 +21,6 @@ describe('menu lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(16);
+    expect(report.payload.javascript.kb).toBeLessThan(16.1);
   });
 });
diff --git a/projects/core/src/month/month.test.lighthouse.ts b/projects/core/src/month/month.test.lighthouse.ts
@@ -19,6 +19,6 @@ describe('month lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.5);
+    expect(report.payload.javascript.kb).toBeLessThan(25.6);
   });
 });
diff --git a/projects/core/src/notification/notification.test.lighthouse.ts b/projects/core/src/notification/notification.test.lighthouse.ts
@@ -17,6 +17,6 @@ describe('notification lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.3);
+    expect(report.payload.javascript.kb).toBeLessThan(25.4);
   });
 });
diff --git a/projects/core/src/panel/panel.test.lighthouse.ts b/projects/core/src/panel/panel.test.lighthouse.ts
@@ -27,6 +27,6 @@ describe('panel lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(21.5);
+    expect(report.payload.javascript.kb).toBeLessThan(21.6);
   });
 });
diff --git a/projects/core/src/preferences-input/preferences-input.test.lighthouse.ts b/projects/core/src/preferences-input/preferences-input.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('preferences-input lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(32.6);
+    expect(report.payload.javascript.kb).toBeLessThan(32.7);
   });
 });
diff --git a/projects/core/src/sort-button/sort-button.test.lighthouse.ts b/projects/core/src/sort-button/sort-button.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('sort-button lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(18.8);
+    expect(report.payload.javascript.kb).toBeLessThan(18.9);
   });
 });
diff --git a/projects/core/src/steps/steps.test.lighthouse.ts b/projects/core/src/steps/steps.test.lighthouse.ts
@@ -20,6 +20,6 @@ describe('steps lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(23.7);
+    expect(report.payload.javascript.kb).toBeLessThan(23.8);
   });
 });
diff --git a/projects/core/src/tag/tag.test.lighthouse.ts b/projects/core/src/tag/tag.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('tag lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(18.6);
+    expect(report.payload.javascript.kb).toBeLessThan(18.7);
   });
 });
diff --git a/projects/core/src/toast/toast.test.lighthouse.ts b/projects/core/src/toast/toast.test.lighthouse.ts
@@ -17,6 +17,6 @@ describe('toast lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(24.6);
+    expect(report.payload.javascript.kb).toBeLessThan(24.8);
   });
 });
diff --git a/projects/core/src/tooltip/tooltip.examples.ts b/projects/core/src/tooltip/tooltip.examples.ts
@@ -14,6 +14,7 @@ import '@nvidia-elements/core/badge/define.js';
 import '@nvidia-elements/core/icon/define.js';
 import '@nvidia-elements/core/icon-button/define.js';
 import '@nvidia-elements/core/dialog/define.js';
+import '@nvidia-elements/core/dropdown/define.js';
 import type { Badge } from '@nvidia-elements/core/badge';
 
 export default {
@@ -396,6 +397,17 @@ export const NestedDynamic = {
   `
 };
 
+/**
+ * @summary Button combining interestfor and popovertarget for coordinated tooltip and dropdown behavior.
+ */
+export const PopoverInterest = {
+  render: () => html`
+<nve-button interestfor="tooltip" popovertarget="dropdown">Button</nve-button>
+<nve-tooltip id="tooltip">tooltip</nve-tooltip>
+<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
+  `
+};
+
 /**
  * @summary Tooltip functionality using interest invokers to control tooltip visibility on hover and focus.
  * @tags test-case
diff --git a/projects/core/src/tooltip/tooltip.test.ts b/projects/core/src/tooltip/tooltip.test.ts
@@ -2,12 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { html } from 'lit';
-import { describe, expect, it, beforeEach, afterEach } from 'vitest';
-import { createFixture, removeFixture, elementIsStable, emulateMouseEnter, untilEvent } from '@internals/testing';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import {
+  createFixture,
+  removeFixture,
+  elementIsStable,
+  emulateClick,
+  emulateMouseEnter,
+  untilEvent
+} from '@internals/testing';
 import { Tooltip } from '@nvidia-elements/core/tooltip';
 import { Button } from '@nvidia-elements/core/button';
+import type { Dropdown } from '@nvidia-elements/core/dropdown';
 import '@nvidia-elements/core/tooltip/define.js';
 import '@nvidia-elements/core/button/define.js';
+import '@nvidia-elements/core/dropdown/define.js';
 
 describe(Tooltip.metadata.tag, () => {
   let fixture: HTMLElement;
@@ -26,6 +35,7 @@ describe(Tooltip.metadata.tag, () => {
   });
 
   afterEach(() => {
+    vi.useRealTimers();
     removeFixture(fixture);
   });
 
@@ -62,11 +72,6 @@ describe(Tooltip.metadata.tag, () => {
     expect(element._internals.role).toBe('tooltip');
   });
 
-  it('should default with an open delay set to undefined', async () => {
-    await elementIsStable(element);
-    expect(element.openDelay).toBeUndefined();
-  });
-
   it('should default with an interest delay start set 0.5s', async () => {
     await elementIsStable(element);
     expect(getComputedStyle(element).getPropertyValue('interest-delay-start')).toBe('0.5s');
@@ -79,17 +84,102 @@ describe(Tooltip.metadata.tag, () => {
     expect(element.getAttribute('status')).toBe('muted');
   });
 
-  it('if open-delay set, display tooltip after waiting for delayed time', async () => {
-    element.hidePopover();
-    element.openDelay = 500;
-    element.trigger = trigger;
+  it('should display the tooltip after the interest delay', async () => {
+    vi.useFakeTimers();
+    element.style.setProperty('interest-delay-start', '50ms');
     await elementIsStable(element);
+
+    emulateMouseEnter(trigger);
+    vi.advanceTimersByTime(49);
+    expect(element.matches(':popover-open')).toBe(false);
+
+    vi.advanceTimersByTime(1);
+    expect(element.matches(':popover-open')).toBe(true);
+  });
+});
+
+describe(`${Tooltip.metadata.tag}: popover interest handover`, () => {
+  let fixture: HTMLElement;
+  let element: Tooltip;
+  let dropdown: Dropdown;
+  let trigger: Button;
+
+  beforeEach(async () => {
+    fixture = await createFixture(html`
+      <nve-tooltip id="tooltip">hello</nve-tooltip>
+      <nve-dropdown id="dropdown"></nve-dropdown>
+      <nve-button interestfor="tooltip" popovertarget="dropdown">button</nve-button>
+    `);
+    element = fixture.querySelector('#tooltip');
+    dropdown = fixture.querySelector('#dropdown');
+    trigger = fixture.querySelector(Button.metadata.tag);
+    await elementIsStable(element);
+    await elementIsStable(dropdown);
     await elementIsStable(trigger);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    removeFixture(fixture);
+  });
+
+  it('should hide an open tooltip when its trigger opens an interactive popover', async () => {
+    element.style.setProperty('interest-delay-start', '0s');
+    await elementIsStable(element);
+
+    const tooltipOpen = untilEvent(element, 'open');
+    emulateMouseEnter(trigger);
+    await tooltipOpen;
+    expect(element.matches(':popover-open')).toBe(true);
+
+    const dropdownOpen = untilEvent(dropdown, 'open');
+    emulateClick(trigger);
+    await dropdownOpen;
+    expect(element.matches(':popover-open')).toBe(false);
+    expect(trigger.popoverTargetElement).toBe(dropdown);
+    expect(dropdown.matches(':popover-open')).toBe(true);
+
+    emulateMouseEnter(trigger);
+    expect(element.matches(':popover-open')).toBe(false);
+  });
+
+  it('should cancel a pending tooltip when its trigger opens an interactive popover', async () => {
+    vi.useFakeTimers();
+    element.style.setProperty('interest-delay-start', '50ms');
+    await elementIsStable(element);
+
+    emulateMouseEnter(trigger);
+    emulateClick(trigger);
+    expect(trigger.popoverTargetElement).toBe(dropdown);
+    expect(dropdown.matches(':popover-open')).toBe(true);
+    vi.advanceTimersByTime(50);
+
     expect(element.matches(':popover-open')).toBe(false);
+  });
+
+  it('should preserve a pending tooltip when opening the interactive popover is canceled', async () => {
+    vi.useFakeTimers();
+    element.style.setProperty('interest-delay-start', '50ms');
+    dropdown.addEventListener('beforetoggle', event => event.preventDefault(), { once: true });
+    await elementIsStable(element);
 
-    const open = untilEvent(element, 'open');
     emulateMouseEnter(trigger);
-    expect(await open).toBeDefined();
+    emulateClick(trigger);
+    expect(dropdown.matches(':popover-open')).toBe(false);
+    vi.advanceTimersByTime(50);
+
     expect(element.matches(':popover-open')).toBe(true);
   });
+
+  it('should not revive a tooltip when dismissal restores non-focus-visible focus', async () => {
+    const focusVisibleMatch = vi.spyOn(trigger, 'matches').mockReturnValue(false);
+
+    emulateClick(trigger);
+    dropdown.hidePopover();
+    trigger.dispatchEvent(new FocusEvent('focus'));
+
+    expect(element.matches(':popover-open')).toBe(false);
+    expect(focusVisibleMatch).toHaveBeenCalledWith(':focus-visible');
+  });
 });
diff --git a/projects/core/src/tree/tree.test.lighthouse.ts b/projects/core/src/tree/tree.test.lighthouse.ts
@@ -27,6 +27,6 @@ describe('tree lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(29.7);
+    expect(report.payload.javascript.kb).toBeLessThan(29.8);
   });
 });
diff --git a/projects/core/src/week/week.test.lighthouse.ts b/projects/core/src/week/week.test.lighthouse.ts
@@ -19,6 +19,6 @@ describe('week lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.5);
+    expect(report.payload.javascript.kb).toBeLessThan(25.6);
   });
 });
diff --git a/projects/site/src/docs/elements/tooltip.md b/projects/site/src/docs/elements/tooltip.md
@@ -34,6 +34,10 @@ Learn more about native [Popover APIs](/docs/foundations/popovers/).
 
 {% example '@nvidia-elements/core/tooltip/tooltip.examples.json' 'Events' '{ "inline": false, "height": "280px" }' %}
 
+## Interactive Popover
+
+{% example '@nvidia-elements/core/tooltip/tooltip.examples.json' 'PopoverInterest' '{ "inline": false, "height": "260px" }' %}
+
 ## Open Delay
 
 {% api 'nve-tooltip', 'property' 'openDelay' %}
