feat(tooltip): Set up rich tooltip to persist if mouse leaves anchor …

…and enters rich tooltip.

BREAKING CHANGE:
  Added adapter methods:
  - setAnchorAttribute(attr: string, value: string): void;
  - registerEventHandler<K extends EventType>(
        evtType: K, handler: SpecificEventListener<K>): void;
  - deregisterEventHandler<K extends EventType>(
        evtType: K, handler: SpecificEventListener<K>): void;
Rich tooltips are currently in development and is not yet ready for use.

PiperOrigin-RevId: 343894231

packages/mdc-tooltip/adapter.ts

@@ -88,11 +88,28 @@ export interface MDCTooltipAdapter {
    */
   getAnchorAttribute(attr: string): string|null;
 
+  /**
+   * Sets an attribute on the anchor element.
+   */
+  setAnchorAttribute(attr: string, value: string): void;
+
   /**
    * @return true if the text direction is right-to-left.
    */
   isRTL(): boolean;
 
+  /**
+   * Registers an event listener to the root element.
+   */
+  registerEventHandler<K extends EventType>(
+      evtType: K, handler: SpecificEventListener<K>): void;
+
+  /**
+   * Deregisters an event listener to the root element.
+   */
+  deregisterEventHandler<K extends EventType>(
+      evtType: K, handler: SpecificEventListener<K>): void;
+
   /**
    * Registers an event listener to the document body.
    */

packages/mdc-tooltip/component.ts

@@ -134,7 +134,20 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
       getAnchorAttribute: (attr) => {
         return this.anchorElem ? this.anchorElem.getAttribute(attr) : null;
       },
+      setAnchorAttribute: (attr, value) => {
+        this.anchorElem?.setAttribute(attr, value);
+      },
       isRTL: () => getComputedStyle(this.root).direction === 'rtl',
+      registerEventHandler: (evt, handler) => {
+        if (this.root instanceof HTMLElement) {
+          this.root.addEventListener(evt, handler);
+        }
+      },
+      deregisterEventHandler: (evt, handler) => {
+        if (this.root instanceof HTMLElement) {
+          this.root.removeEventListener(evt, handler);
+        }
+      },
       registerDocumentEventHandler: (evt, handler) => {
         document.body.addEventListener(evt, handler);
       },

packages/mdc-tooltip/constants.ts

@@ -22,6 +22,7 @@
  */
 
 enum CssClasses {
+  RICH = 'mdc-tooltip--rich',
   SHOWN = 'mdc-tooltip--shown',
   SHOWING = 'mdc-tooltip--showing',
   SHOWING_TRANSITION = 'mdc-tooltip--showing-transition',

packages/mdc-tooltip/foundation.ts

@@ -30,6 +30,7 @@ import {AnchorBoundaryType, CssClasses, numbers, XPosition, YPosition} from './c
 import {ShowTooltipOptions} from './types';
 
 const {
+  RICH,
   SHOWN,
   SHOWING,
   SHOWING_TRANSITION,
@@ -57,7 +58,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
       getAnchorBoundingRect: () =>
           ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0}),
       getAnchorAttribute: () => null,
+      setAnchorAttribute: () => null,
       isRTL: () => false,
+      registerEventHandler: () => undefined,
+      deregisterEventHandler: () => undefined,
       registerDocumentEventHandler: () => undefined,
       deregisterDocumentEventHandler: () => undefined,
       registerWindowEventHandler: () => undefined,
@@ -66,6 +70,7 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
     };
   }
 
+  private isRich!: boolean;  // assigned in init()
   private isShown = false;
   private anchorGap = numbers.BOUNDED_ANCHOR_GAP;
   private xTooltipPos = XPosition.DETECTED;
@@ -83,6 +88,8 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
   private readonly animFrame: AnimationFrame;
   private readonly documentClickHandler: SpecificEventListener<'click'>;
   private readonly documentKeydownHandler: SpecificEventListener<'keydown'>;
+  private readonly richTooltipMouseEnterHandler:
+      SpecificEventListener<'mouseenter'>;
   private readonly windowScrollHandler: SpecificEventListener<'scroll'>;
   private readonly windowResizeHandler: SpecificEventListener<'resize'>;
 
@@ -98,6 +105,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
       this.handleKeydown(evt);
     };
 
+    this.richTooltipMouseEnterHandler = () => {
+      this.handleRichTooltipMouseEnter();
+    };
+
     this.windowScrollHandler = () => {
       this.handleWindowChangeEvent();
     };
@@ -107,6 +118,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
     };
   }
 
+  init() {
+    this.isRich = this.adapter.hasClass(RICH);
+  }
+
   handleAnchorMouseEnter() {
     if (this.isShown) {
       // Covers the instance where a user hovers over the anchor to reveal the
@@ -155,6 +170,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
     }
   }
 
+  private handleRichTooltipMouseEnter() {
+    this.show();
+  }
+
   /**
    * On window resize or scroll, check the anchor position and size and
    * repostion tooltip if necessary.
@@ -181,9 +200,14 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
     if (!showTooltipOptions.hideFromScreenreader) {
       this.adapter.setAttribute('aria-hidden', 'false');
     }
+    if (this.isRich) {
+      this.adapter.setAnchorAttribute('aria-expanded', 'true');
+      this.adapter.registerEventHandler(
+          'mouseenter', this.richTooltipMouseEnterHandler);
+    }
     this.adapter.removeClass(HIDE);
     this.adapter.addClass(SHOWING);
-    if (this.isTooltipMultiline()) {
+    if (this.isTooltipMultiline() && !this.isRich) {
       this.adapter.addClass(MULTILINE_TOOLTIP);
     }
     this.anchorRect = this.adapter.getAnchorBoundingRect();
@@ -218,6 +242,11 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
 
     this.isShown = false;
     this.adapter.setAttribute('aria-hidden', 'true');
+    if (this.isRich) {
+      this.adapter.setAnchorAttribute('aria-expanded', 'false');
+      this.adapter.deregisterEventHandler(
+          'mouseenter', this.richTooltipMouseEnterHandler);
+    }
     this.clearAllAnimationClasses();
     this.adapter.addClass(HIDE);
     this.adapter.addClass(HIDE_TRANSITION);
@@ -543,6 +572,11 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
     this.adapter.removeClass(HIDE);
     this.adapter.removeClass(HIDE_TRANSITION);
 
+    if (this.isRich) {
+      this.adapter.deregisterEventHandler(
+          'mouseenter', this.richTooltipMouseEnterHandler);
+    }
+
     this.adapter.deregisterDocumentEventHandler(
         'click', this.documentClickHandler);
     this.adapter.deregisterDocumentEventHandler(