feat(tooltip): Add positioning adjustment and position specification for rich tooltips. Rich tooltips default to the END position and does not support CENTER positioning.

PiperOrigin-RevId: 347829537

Author: Shi Shu

packages/mdc-tooltip/_tooltip.scss

@@ -104,6 +104,10 @@ $exit-duration: 75ms;
       @include feature-targeting.targets($feat-structure) {
         display: inline-block;
         border-radius: $_rich_corner_radius;
+        // Moves the rich tooltip out of the viewport/parent element initially
+        // so that the initial width is not affected and a 'correct' width can
+        // be used to calculate the position of the tooltip.
+        left: -$_rich_max_width;
         padding: $_rich_padding $_rich_padding;
       }
     }

packages/mdc-tooltip/constants.ts

@@ -57,6 +57,7 @@ const events = {
 enum XPosition {
   DETECTED = 0,
   START = 1,
+  // Note: CENTER is not valid for rich tooltips.
   CENTER = 2,
   END = 3,
 }

packages/mdc-tooltip/foundation.ts

@@ -444,17 +444,21 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
    */
   private calculateXTooltipDistance(
       anchorRect: ClientRect, tooltipWidth: number) {
-    let startPos = anchorRect.left;
-    let endPos = anchorRect.right - tooltipWidth;
-    const centerPos = anchorRect.left + (anchorRect.width - tooltipWidth) / 2;
-
-    if (this.adapter.isRTL()) {
-      startPos = anchorRect.right - tooltipWidth;
-      endPos = anchorRect.left;
+    const isLTR = !this.adapter.isRTL();
+    let startPos, endPos, centerPos: number|undefined;
+    if (this.isRich) {
+      startPos = isLTR ? anchorRect.left - tooltipWidth : anchorRect.right;
+      endPos = isLTR ? anchorRect.right : anchorRect.left - tooltipWidth;
+    } else {
+      startPos = isLTR ? anchorRect.left : anchorRect.right - tooltipWidth;
+      endPos = isLTR ? anchorRect.right - tooltipWidth : anchorRect.left;
+      centerPos = anchorRect.left + (anchorRect.width - tooltipWidth) / 2;
     }
 
-    const positionOptions =
-        this.determineValidPositionOptions(centerPos, startPos, endPos);
+    const positionOptions = this.isRich ?
+        this.determineValidPositionOptions(startPos, endPos) :
+        // For plain tooltips, centerPos is defined
+        this.determineValidPositionOptions(centerPos!, startPos, endPos);
 
     if (this.xTooltipPos === XPosition.START && positionOptions.has(startPos)) {
       return startPos;
@@ -467,14 +471,15 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
       return centerPos;
     }
 
-    if (positionOptions.has(centerPos)) {
-      return centerPos;
-    }
-    if (positionOptions.has(startPos)) {
-      return startPos;
-    }
-    if (positionOptions.has(endPos)) {
-      return endPos;
+    // If no user position is supplied, rich tooltips default to end pos, then
+    // start position. Plain tooltips default to center, start, then end.
+    const possiblePositions =
+        this.isRich ? [endPos, startPos] : [centerPos, startPos, endPos];
+
+    const validPosition =
+        possiblePositions.find(pos => positionOptions.has(pos));
+    if (validPosition) {
+      return validPosition;
     }
 
     // Indicates that all potential positions would result in the tooltip
@@ -491,37 +496,26 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
   }
 
   /**
-   * Given the values for center/start/end alignment of the tooltip, calculates
+   * Given the values for the horizontal alignments of the tooltip, calculates
    * which of these options would result in the tooltip maintaining the required
    * threshold distance vs which would result in the tooltip staying within the
    * viewport.
    *
    * A Set of values is returned holding the distances that would honor the
    * above requirements. Following the logic for determining the tooltip
-   * position, if all three alignments violate the threshold, then the returned
-   * Set contains values that keep the tooltip within the viewport.
+   * position, if all alignments violate the threshold, then the returned Set
+   * contains values that keep the tooltip within the viewport.
    */
-  private determineValidPositionOptions(
-      centerPos: number, startPos: number, endPos: number) {
+  private determineValidPositionOptions(...positions: number[]) {
     const posWithinThreshold = new Set();
     const posWithinViewport = new Set();
 
-    if (this.positionHonorsViewportThreshold(centerPos)) {
-      posWithinThreshold.add(centerPos);
-    } else if (this.positionDoesntCollideWithViewport(centerPos)) {
-      posWithinViewport.add(centerPos);
-    }
-
-    if (this.positionHonorsViewportThreshold(startPos)) {
-      posWithinThreshold.add(startPos);
-    } else if (this.positionDoesntCollideWithViewport(startPos)) {
-      posWithinViewport.add(startPos);
-    }
-
-    if (this.positionHonorsViewportThreshold(endPos)) {
-      posWithinThreshold.add(endPos);
-    } else if (this.positionDoesntCollideWithViewport(endPos)) {
-      posWithinViewport.add(endPos);
+    for (const position of positions) {
+      if (this.positionHonorsViewportThreshold(position)) {
+        posWithinThreshold.add(position);
+      } else if (this.positionDoesntCollideWithViewport(position)) {
+        posWithinViewport.add(position);
+      }
     }
 
     return posWithinThreshold.size ? posWithinThreshold : posWithinViewport;

packages/mdc-tooltip/test/foundation.test.ts

@@ -1062,7 +1062,48 @@ describe('MDCTooltipFoundation', () => {
     expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `80px`);
   });
 
-  it('allows users to specify the tooltip position (START alignment instead of CENTER)',
+  it('properly calculates rich tooltip position (START alignment)', () => {
+    const anchorBoundingRect =
+        {top: 0, bottom: 35, left: 100, right: 150, width: 50, height: 35};
+    const expectedTooltipHeight =
+        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
+    const tooltipSize = {width: 40, height: 30};
+    const {foundation, mockAdapter} =
+        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
+    mockAdapter.getViewportWidth.and.returnValue(150);
+    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
+    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);
+
+    foundation.show();
+
+    expect(mockAdapter.setStyleProperty)
+        .toHaveBeenCalledWith('top', `${expectedTooltipHeight}px`);
+    expect(mockAdapter.setStyleProperty)
+        .toHaveBeenCalledWith(
+            'left', `${anchorBoundingRect.left - tooltipSize.width}px`);
+  });
+
+  it('properly calculates rich tooltip position (END alignment)', () => {
+    const anchorBoundingRect =
+        {top: 0, bottom: 35, left: 0, right: 50, width: 50, height: 35};
+    const expectedTooltipTop =
+        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
+    const tooltipSize = {width: 40, height: 30};
+    const {foundation, mockAdapter} =
+        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
+    mockAdapter.getViewportWidth.and.returnValue(150);
+    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
+    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);
+
+    foundation.show();
+
+    expect(mockAdapter.setStyleProperty)
+        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);
+    expect(mockAdapter.setStyleProperty)
+        .toHaveBeenCalledWith('left', `${anchorBoundingRect.right}px`);
+  });
+
+  it('allows users to specify the tooltip position for plain tooltips (START alignment instead of CENTER)',
      () => {
        const anchorBoundingRect =
            {top: 0, bottom: 35, left: 32, right: 232, width: 200, height: 35};
@@ -1084,7 +1125,7 @@ describe('MDCTooltipFoundation', () => {
            .toHaveBeenCalledWith('left', `32px`);
      });
 
-  it('ignores user specification if positioning violates threshold (CENTER alignment instead of START)',
+  it('ignores user specification if positioning violates threshold for plain tooltips (CENTER alignment instead of START)',
      () => {
        const anchorBoundingRect =
            {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};
@@ -1106,7 +1147,7 @@ describe('MDCTooltipFoundation', () => {
            .toHaveBeenCalledWith('left', `80px`);
      });
 
-  it('allows users to specify the tooltip position (END alignment instead of START)',
+  it('allows users to specify the tooltip position for plain tooltips (END alignment instead of START)',
      () => {
        const anchorHeight = 35;
        const expectedTooltipHeight = anchorHeight + numbers.BOUNDED_ANCHOR_GAP;
@@ -1132,6 +1173,73 @@ describe('MDCTooltipFoundation', () => {
            .toHaveBeenCalledWith('left', `50px`);
      });
 
+  it('allows users to specify the tooltip position for rich tooltips (END alignment instead of START)',
+     () => {
+       const anchorBoundingRect =
+           {top: 0, bottom: 35, left: 132, right: 232, width: 100, height: 35};
+       const expectedTooltipTop =
+           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
+       const tooltipSize = {width: 40, height: 30};
+       const {foundation, mockAdapter} =
+           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
+       mockAdapter.getViewportWidth.and.returnValue(500);
+       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
+       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);
+
+       foundation.setTooltipPosition({xPos: XPosition.START});
+       foundation.show();
+
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith(
+               'left', `${anchorBoundingRect.left - tooltipSize.width}px`);
+     });
+
+  it('ignores user specification if positioning violates threshold for rich tooltips (END alignment instead of START)',
+     () => {
+       const anchorBoundingRect =
+           {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};
+       const expectedTooltipTop =
+           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
+       const tooltipSize = {width: 40, height: 30};
+       const {foundation, mockAdapter} =
+           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
+       mockAdapter.getViewportWidth.and.returnValue(500);
+       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
+       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);
+
+       foundation.setTooltipPosition({xPos: XPosition.START});
+       foundation.show();
+
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith('left', `${anchorBoundingRect.right}px`);
+     });
+
+  it('ignores user specification if positioning is not supported for rich tooltips (END alignment instead of CENTER)',
+     () => {
+       const anchorBoundingRect =
+           {top: 0, bottom: 35, left: 0, right: 100, width: 100, height: 35};
+       const expectedTooltipHeight =
+           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
+       const {foundation, mockAdapter} =
+           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
+       mockAdapter.getViewportWidth.and.returnValue(500);
+       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
+       mockAdapter.getTooltipSize.and.returnValue({width: 50, height: 30});
+
+       foundation.setTooltipPosition({xPos: XPosition.CENTER});
+       foundation.show();
+
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith('top', `${expectedTooltipHeight}px`);
+       expect(mockAdapter.setStyleProperty)
+           .toHaveBeenCalledWith('left', `${anchorBoundingRect.right}px`);
+     });
+
+
   it('properly calculates START tooltip position in RTL', () => {
     const anchorBoundingRect =
         {top: 0, bottom: 35, left: 0, right: 100, width: 100, height: 35};