refactor(tooltip): implement dynamic anchor change for the tooltip

* Moved handling of anchor resolution and updates to the event controller.
* Added 'click' to the default hide-triggers
* Tooltip `show()` can now accept a target element to allow transient anchors.
* Refactored tests and added a check to ensure `igcClosed` fires on Escape key.

Author: Zneeky

src/components/tooltip/tooltip-event-controller.ts

@@ -1,4 +1,5 @@
 import type { ReactiveController } from 'lit';
+import { getElementByIdFromRoot } from '../common/util.js';
 import service from './tooltip-service.js';
 import type IgcTooltipComponent from './tooltip.js';
 
@@ -13,10 +14,11 @@ type TooltipCallbacks = {
 class TooltipController implements ReactiveController {
   private readonly _host: IgcTooltipComponent;
   private _anchor: TooltipAnchor;
+  private _isTransientAnchor = false;
 
   private _options!: TooltipCallbacks;
   private _showTriggers = new Set(['pointerenter']);
-  private _hideTriggers = new Set(['pointerleave']);
+  private _hideTriggers = new Set(['pointerleave', 'click']);
 
   private _open = false;
 
@@ -35,6 +37,11 @@ class TooltipController implements ReactiveController {
     } else {
       this._removeTooltipListeners();
       service.remove(this._host);
+
+      if (this._isTransientAnchor) {
+        this._dispose();
+        this._isTransientAnchor = false;
+      }
     }
   }
 
@@ -49,9 +56,12 @@ class TooltipController implements ReactiveController {
    * Removes all triggers from the previous `anchor` target and rebinds the current
    * sets back to the new value if it exists.
    */
-  public set anchor(value: TooltipAnchor) {
+  public setAnchor(value: TooltipAnchor, transient = false): void {
+    if (this._anchor === value) return;
+
     this._dispose();
     this._anchor = value;
+    this._isTransientAnchor = transient;
 
     for (const each of this._showTriggers) {
       this._anchor?.addEventListener(each, this);
@@ -116,6 +126,15 @@ class TooltipController implements ReactiveController {
     this._host.addController(this);
   }
 
+  public resolveAnchor(value: Element | string | undefined): void {
+    const resolvedAnchor =
+      typeof value === 'string'
+        ? getElementByIdFromRoot(this._host, value)
+        : (value ?? null);
+
+    this.setAnchor(resolvedAnchor);
+  }
+
   private _addTooltipListeners(): void {
     this._host.addEventListener('pointerenter', this, { passive: true });
     this._host.addEventListener('pointerleave', this, { passive: true });
@@ -148,6 +167,14 @@ class TooltipController implements ReactiveController {
     this._anchor = null;
   }
 
+  /** @internal */
+  public hostConnected(): void {
+    const attr = this._host.getAttribute('anchor');
+    if (attr) {
+      this.resolveAnchor(attr);
+    }
+  }
+
   /** @internal */
   public hostDisconnected(): void {
     this._dispose();

src/components/tooltip/tooltip.spec.ts

@@ -72,7 +72,7 @@ describe('Tooltip', () => {
       expect(tooltip.placement).to.equal('top');
       expect(tooltip.anchor).to.be.undefined;
       expect(tooltip.showTriggers).to.equal('pointerenter');
-      expect(tooltip.hideTriggers).to.equal('pointerleave');
+      expect(tooltip.hideTriggers).to.equal('pointerleave,click');
       expect(tooltip.showDelay).to.equal(200);
       expect(tooltip.hideDelay).to.equal(300);
       expect(tooltip.message).to.equal('');
@@ -168,18 +168,13 @@ describe('Tooltip', () => {
       simulatePointerEnter(third);
       await clock.tickAsync(DEFAULT_SHOW_DELAY);
       await showComplete();
-      expect(tooltip.open).to.be.true;
+      expect(tooltip.open).to.be.false;
 
       simulatePointerLeave(third);
       await clock.tickAsync(endTick(DEFAULT_HIDE_DELAY));
       await hideComplete();
       expect(tooltip.open).to.be.false;
 
-      simulatePointerEnter(first);
-      await clock.tickAsync(DEFAULT_SHOW_DELAY);
-      await showComplete();
-      expect(tooltip.open).to.be.false;
-
       // By providing an IDREF
       tooltip.anchor = first.id;
       await elementUpdated(tooltip);
@@ -465,7 +460,7 @@ describe('Tooltip', () => {
   describe('Behaviors', () => {
     beforeEach(async () => {
       clock = useFakeTimers({ toFake: ['setTimeout'] });
-      const container = await fixture(createDefaultTooltip());
+      const container = await fixture(createTooltipWithTarget());
       anchor = container.querySelector('button')!;
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
     });
@@ -476,7 +471,7 @@ describe('Tooltip', () => {
 
     it('default triggers', async () => {
       expect(tooltip.showTriggers).to.equal('pointerenter');
-      expect(tooltip.hideTriggers).to.equal('pointerleave');
+      expect(tooltip.hideTriggers).to.equal('pointerleave,click');
 
       simulatePointerEnter(anchor);
       await clock.tickAsync(DEFAULT_SHOW_DELAY);
@@ -490,8 +485,8 @@ describe('Tooltip', () => {
     });
 
     it('custom triggers via property', async () => {
-      tooltip.showTriggers = 'focus,click';
-      tooltip.hideTriggers = 'blur';
+      tooltip.showTriggers = 'focus, pointerenter';
+      tooltip.hideTriggers = 'blur, click';
 
       simulateFocus(anchor);
       await clock.tickAsync(DEFAULT_SHOW_DELAY);
@@ -503,12 +498,12 @@ describe('Tooltip', () => {
       await hideComplete();
       expect(tooltip.open).to.be.false;
 
-      simulateClick(anchor);
+      simulatePointerEnter(anchor);
       await clock.tickAsync(DEFAULT_SHOW_DELAY);
       await showComplete();
       expect(tooltip.open).to.be.true;
 
-      simulateBlur(anchor);
+      simulateClick(anchor);
       await clock.tickAsync(endTick(DEFAULT_HIDE_DELAY));
       await hideComplete();
       expect(tooltip.open).to.be.false;
@@ -517,8 +512,11 @@ describe('Tooltip', () => {
     it('custom triggers via attribute', async () => {
       const template = html`
         <div>
-          <button>Hover over me</button>
-          <igc-tooltip show-triggers="focus,click" hide-triggers="blur"
+          <button id="anchor1">Hover over me</button>
+          <igc-tooltip
+            anchor="anchor1"
+            show-triggers="focus,click"
+            hide-triggers="blur"
             >I am a tooltip</igc-tooltip
           >
         </div>
@@ -594,7 +592,7 @@ describe('Tooltip', () => {
 
     beforeEach(async () => {
       clock = useFakeTimers({ toFake: ['setTimeout'] });
-      const container = await fixture(createDefaultTooltip());
+      const container = await fixture(createTooltipWithTarget());
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
       anchor = container.querySelector('button')!;
       eventSpy = spy(tooltip, 'emitEvent');
@@ -667,6 +665,32 @@ describe('Tooltip', () => {
         detail: anchor,
       });
     });
+
+    it('fires `igcClosed` when tooltip is hidden via Escape key', async () => {
+      simulatePointerEnter(anchor);
+      await clock.tickAsync(DEFAULT_SHOW_DELAY);
+      await showComplete(tooltip);
+
+      eventSpy.resetHistory();
+
+      document.documentElement.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Escape',
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      await clock.tickAsync(endTick(DEFAULT_HIDE_DELAY));
+      await hideComplete(tooltip);
+
+      expect(tooltip.open).to.be.false;
+      expect(eventSpy.callCount).to.equal(1);
+      expect(eventSpy.firstCall).calledWith('igcClosed', {
+        cancelable: false,
+        detail: anchor,
+      });
+    });
   });
 
   describe('Keyboard interactions', () => {
@@ -771,10 +795,10 @@ function createTooltipWithTarget(isOpen = false) {
 function createTooltips() {
   return html`
     <div>
-      <button>Target 1</button>
-      <igc-tooltip>First</igc-tooltip>
-      <button>Target 2</button>
-      <igc-tooltip>Second</igc-tooltip>
+      <button id="firstTarget">Target 1</button>
+      <igc-tooltip anchor="firstTarget">First</igc-tooltip>
+      <button id="secondTarget">Target 2</button>
+      <igc-tooltip anchor="secondTarget">Second</igc-tooltip>
     </div>
   `;
 }

src/components/tooltip/tooltip.ts

@@ -10,7 +10,7 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { asNumber, getElementByIdFromRoot, isString } from '../common/util.js';
+import { asNumber } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent, { type IgcPlacement } from '../popover/popover.js';
 import { styles as shared } from './themes/shared/tooltip.common.css';
@@ -168,7 +168,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
    * Expects a comma separate string of different event triggers.
    *
    * @attr hide-triggers
-   * @default pointerleave
+   * @default "pointerleave, click"
    */
   @property({ attribute: 'hide-triggers' })
   public set hideTriggers(value: string) {
@@ -236,8 +236,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   }
 
   protected override firstUpdated(): void {
-    this._controller.anchor ??= this.previousElementSibling;
-
     if (this.open) {
       this.updateComplete.then(() => {
         this._player.playExclusive(this._showAnimation);
@@ -247,12 +245,8 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   }
 
   @watch('anchor')
-  protected _anchorChanged(): void {
-    const target = isString(this.anchor)
-      ? getElementByIdFromRoot(this, this.anchor)
-      : this.anchor;
-
-    this._controller.anchor = target;
+  protected _onAnchorChange() {
+    this._controller.resolveAnchor(this.anchor);
   }
 
   @watch('sticky')
@@ -318,7 +312,17 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   }
 
   /** Shows the tooltip if not already showing. */
-  public show(): Promise<boolean> {
+  public show(target?: Element): Promise<boolean> {
+    if (target) {
+      clearTimeout(this._timeoutId);
+      this._player.stopAll();
+
+      if (this._controller.anchor !== target) {
+        this.open = false;
+      }
+      this._controller.setAnchor(target, true);
+    }
+
     return this._applyTooltipState({ show: true });
   }