Revert "Revert "feat(material/tooltip): add option to open tooltip at…

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -98,7 +98,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   _preferredPositions: ConnectionPositionPair[] = [];
 
   /** The origin element against which the overlay will be positioned. */
-  private _origin: FlexibleConnectedPositionStrategyOrigin;
+  _origin: FlexibleConnectedPositionStrategyOrigin;
 
   /** The overlay pane element. */
   private _pane: HTMLElement;

src/components-examples/material/tooltip/index.ts

@@ -16,6 +16,7 @@ import {TooltipMessageExample} from './tooltip-message/tooltip-message-example';
 import {TooltipModifiedDefaultsExample} from './tooltip-modified-defaults/tooltip-modified-defaults-example';
 import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
 import {TooltipPositionExample} from './tooltip-position/tooltip-position-example';
+import {TooltipPositionAtOriginExample} from './tooltip-position-at-origin/tooltip-position-at-origin-example';
 import {TooltipHarnessExample} from './tooltip-harness/tooltip-harness-example';
 
 export {
@@ -29,6 +30,7 @@ export {
   TooltipModifiedDefaultsExample,
   TooltipOverviewExample,
   TooltipPositionExample,
+  TooltipPositionAtOriginExample,
 };
 
 const EXAMPLES = [
@@ -42,6 +44,7 @@ const EXAMPLES = [
   TooltipModifiedDefaultsExample,
   TooltipOverviewExample,
   TooltipPositionExample,
+  TooltipPositionAtOriginExample,
 ];
 
 @NgModule({

src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.css

@@ -0,0 +1,8 @@
+button {
+  width: 500px;
+  height: 500px;
+}
+
+.example-enabled-checkbox {
+  margin-left: 8px;
+}

src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.html

@@ -0,0 +1,10 @@
+<button mat-raised-button
+        matTooltip="Info about the action"
+        [matTooltipPositionAtOrigin]="enabled.value"
+        aria-label="Button that displays a tooltip when focused or hovered over">
+  Action
+</button>
+
+<mat-checkbox [formControl]="enabled" class="example-enabled-checkbox">
+  Position at origin enabled
+</mat-checkbox>

src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Basic tooltip
+ */
+@Component({
+  selector: 'tooltip-position-at-origin-example',
+  templateUrl: 'tooltip-position-at-origin-example.html',
+  styleUrls: ['tooltip-position-at-origin-example.css'],
+})
+export class TooltipPositionAtOriginExample {
+  enabled = new FormControl(false);
+}

src/dev-app/tooltip/tooltip-demo.html

@@ -24,3 +24,6 @@ <h3>Tooltip overview</h3>
 
 <h3>Tooltip positioning</h3>
 <tooltip-position-example></tooltip-position-example>
+
+<h3>Tooltip with position at origin</h3>
+<tooltip-position-at-origin-example></tooltip-position-at-origin-example>

src/material/legacy-tooltip/tooltip.spec.ts

@@ -232,6 +232,77 @@ describe('MatTooltip', () => {
       expect(tooltipDirective._getOverlayPosition().fallback.overlayX).toBe('end');
     }));
 
+    it('should position center-bottom by default', fakeAsync(() => {
+      // We don't bind mouse events on mobile devices.
+      if (platform.IOS || platform.ANDROID) {
+        return;
+      }
+
+      TestBed.resetTestingModule()
+        .configureTestingModule({
+          imports: [MatLegacyTooltipModule, OverlayModule],
+          declarations: [WideTooltipDemo],
+        })
+        .compileComponents();
+
+      const wideFixture = TestBed.createComponent(WideTooltipDemo);
+      wideFixture.detectChanges();
+      tooltipDirective = wideFixture.debugElement
+        .query(By.css('button'))!
+        .injector.get<MatLegacyTooltip>(MatLegacyTooltip);
+      const button: HTMLButtonElement = wideFixture.nativeElement.querySelector('button');
+      const triggerRect = button.getBoundingClientRect();
+
+      dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 100, triggerRect.top + 100);
+      wideFixture.detectChanges();
+      tick();
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeGreaterThan(
+        triggerRect.left + 200,
+      );
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(
+        triggerRect.left + 300,
+      );
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBe(triggerRect.bottom);
+    }));
+
+    it('should be able to override the default positionAtOrigin', fakeAsync(() => {
+      // We don't bind mouse events on mobile devices.
+      if (platform.IOS || platform.ANDROID) {
+        return;
+      }
+
+      TestBed.resetTestingModule()
+        .configureTestingModule({
+          imports: [MatLegacyTooltipModule, OverlayModule],
+          declarations: [WideTooltipDemo],
+          providers: [
+            {
+              provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+              useValue: {positionAtOrigin: true},
+            },
+          ],
+        })
+        .compileComponents();
+
+      const wideFixture = TestBed.createComponent(WideTooltipDemo);
+      wideFixture.detectChanges();
+      tooltipDirective = wideFixture.debugElement
+        .query(By.css('button'))!
+        .injector.get<MatLegacyTooltip>(MatLegacyTooltip);
+      const button: HTMLButtonElement = wideFixture.nativeElement.querySelector('button');
+      const triggerRect = button.getBoundingClientRect();
+
+      dispatchMouseEvent(button, 'mouseenter', triggerRect.left + 50, triggerRect.bottom - 10);
+      wideFixture.detectChanges();
+      tick();
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBe(triggerRect.left + 28);
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBe(triggerRect.bottom - 10);
+    }));
+
     it('should be able to disable tooltip interactivity', fakeAsync(() => {
       TestBed.resetTestingModule()
         .configureTestingModule({
@@ -1556,6 +1627,17 @@ class TooltipDemoWithoutPositionBinding {
   @ViewChild('button') button: ElementRef<HTMLButtonElement>;
 }
 
+@Component({
+  selector: 'app',
+  styles: [`button { width: 500px; height: 500px; }`],
+  template: `<button #button [matTooltip]="message">Button</button>`,
+})
+class WideTooltipDemo {
+  message = 'Test';
+  @ViewChild(MatLegacyTooltip) tooltip: MatLegacyTooltip;
+  @ViewChild('button') button: ElementRef<HTMLButtonElement>;
+}
+
 /** Asserts whether a tooltip directive has a tooltip instance. */
 function assertTooltipInstance(tooltip: MatLegacyTooltip, shouldExist: boolean): void {
   // Note that we have to cast this to a boolean, because Jasmine will go into an infinite loop

src/material/tooltip/tooltip.md

@@ -27,6 +27,12 @@ CSS class that can be used for style (e.g. to add an arrow). The possible classe
 
 <!-- example(tooltip-position) -->
 
+To display the tooltip relative to the mouse or touch that triggered it, use the
+`matTooltipPositionAtOrigin` input.
+With this setting turned on, the tooltip will display relative to the origin of the trigger rather
+than the host element. In cases where the tooltip is not triggered by a touch event or mouse click,
+it will display the same as if this setting was turned off.
+
 ### Showing and hiding
 
 By default, the tooltip will be immediately shown when the user's mouse hovers over the tooltip's

src/material/tooltip/tooltip.spec.ts

@@ -234,6 +234,78 @@ describe('MDC-based MatTooltip', () => {
       expect(tooltipDirective._getOverlayPosition().fallback.overlayX).toBe('end');
     }));
 
+    it('should position on the bottom-left by default', fakeAsync(() => {
+      // We don't bind mouse events on mobile devices.
+      if (platform.IOS || platform.ANDROID) {
+        return;
+      }
+
+      TestBed.resetTestingModule()
+        .configureTestingModule({
+          imports: [MatTooltipModule, OverlayModule],
+          declarations: [WideTooltipDemo],
+        })
+        .compileComponents();
+
+      const wideFixture = TestBed.createComponent(WideTooltipDemo);
+      wideFixture.detectChanges();
+      tooltipDirective = wideFixture.debugElement
+        .query(By.css('button'))!
+        .injector.get<MatTooltip>(MatTooltip);
+      const button: HTMLButtonElement = wideFixture.nativeElement.querySelector('button');
+      const triggerRect = button.getBoundingClientRect();
+
+      dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 100, triggerRect.top + 100);
+      wideFixture.detectChanges();
+      tick();
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(
+        triggerRect.right - 250,
+      );
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBeGreaterThanOrEqual(
+        triggerRect.bottom,
+      );
+    }));
+
+    it('should be able to override the default positionAtOrigin', fakeAsync(() => {
+      // We don't bind mouse events on mobile devices.
+      if (platform.IOS || platform.ANDROID) {
+        return;
+      }
+
+      TestBed.resetTestingModule()
+        .configureTestingModule({
+          imports: [MatTooltipModule, OverlayModule],
+          declarations: [WideTooltipDemo],
+          providers: [
+            {
+              provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+              useValue: {positionAtOrigin: true},
+            },
+          ],
+        })
+        .compileComponents();
+
+      const wideFixture = TestBed.createComponent(WideTooltipDemo);
+      wideFixture.detectChanges();
+      tooltipDirective = wideFixture.debugElement
+        .query(By.css('button'))!
+        .injector.get<MatTooltip>(MatTooltip);
+      const button: HTMLButtonElement = wideFixture.nativeElement.querySelector('button');
+      const triggerRect = button.getBoundingClientRect();
+
+      dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 100, triggerRect.top + 100);
+      wideFixture.detectChanges();
+      tick();
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBe(
+        triggerRect.right - 100 - 20,
+      );
+      expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBe(triggerRect.top + 100);
+    }));
+
     it('should be able to disable tooltip interactivity', fakeAsync(() => {
       TestBed.resetTestingModule()
         .configureTestingModule({
@@ -1588,6 +1660,17 @@ class TooltipDemoWithoutPositionBinding {
   @ViewChild('button') button: ElementRef<HTMLButtonElement>;
 }
 
+@Component({
+  selector: 'app',
+  styles: [`button { width: 500px; height: 500px; }`],
+  template: `<button #button [matTooltip]="message">Button</button>`,
+})
+class WideTooltipDemo {
+  message = 'Test';
+  @ViewChild(MatTooltip) tooltip: MatTooltip;
+  @ViewChild('button') button: ElementRef<HTMLButtonElement>;
+}
+
 /** Asserts whether a tooltip directive has a tooltip instance. */
 function assertTooltipInstance(tooltip: MatTooltip, shouldExist: boolean): void {
   // Note that we have to cast this to a boolean, because Jasmine will go into an infinite loop