Skip to content

Commit 7b0b6eb

Browse files
mmalerbammalerba
committed
fixup! Revert "Revert "feat(material/tooltip): add option to open tooltip at mouse position (#25202)" (#25430)"
1 parent 6231c16 commit 7b0b6eb

File tree

5 files changed

+59
-67
lines changed

5 files changed

+59
-67
lines changed

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

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
dispatchFakeEvent,
1212
dispatchKeyboardEvent,
1313
dispatchMouseEvent,
14-
dispatchTouchEvent,
1514
patchElementFocus,
1615
} from '../../cdk/testing/private';
1716
import {
@@ -237,7 +236,7 @@ describe('MatTooltip', () => {
237236
TestBed.resetTestingModule()
238237
.configureTestingModule({
239238
imports: [MatLegacyTooltipModule, OverlayModule],
240-
declarations: [WideTooltipDemo]
239+
declarations: [WideTooltipDemo],
241240
})
242241
.compileComponents();
243242

@@ -254,8 +253,12 @@ describe('MatTooltip', () => {
254253
tick();
255254
expect(tooltipDirective._isTooltipVisible()).toBe(true);
256255

257-
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeGreaterThan(triggerRect.left + 200);
258-
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(triggerRect.left + 300);
256+
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeGreaterThan(
257+
triggerRect.left + 200,
258+
);
259+
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(
260+
triggerRect.left + 300,
261+
);
259262
expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBe(triggerRect.bottom);
260263
}));
261264

@@ -1227,10 +1230,7 @@ describe('MatTooltip', () => {
12271230
fixture.detectChanges();
12281231
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
12291232

1230-
const triggerRect = button.getBoundingClientRect();
1231-
const offsetX = triggerRect.right - 10;
1232-
const offsetY = triggerRect.top + 10;
1233-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1233+
dispatchFakeEvent(button, 'touchstart');
12341234
fixture.detectChanges();
12351235
tick(250); // Halfway through the delay.
12361236

@@ -1249,10 +1249,7 @@ describe('MatTooltip', () => {
12491249
fixture.detectChanges();
12501250
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
12511251

1252-
const triggerRect = button.getBoundingClientRect();
1253-
const offsetX = triggerRect.right - 10;
1254-
const offsetY = triggerRect.top + 10;
1255-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1252+
dispatchFakeEvent(button, 'touchstart');
12561253
fixture.detectChanges();
12571254
tick(500); // Finish the delay.
12581255
fixture.detectChanges();
@@ -1265,10 +1262,7 @@ describe('MatTooltip', () => {
12651262
const fixture = TestBed.createComponent(BasicTooltipDemo);
12661263
fixture.detectChanges();
12671264
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
1268-
const triggerRect = button.getBoundingClientRect();
1269-
const offsetX = triggerRect.right - 10;
1270-
const offsetY = triggerRect.top + 10;
1271-
const event = dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1265+
const event = dispatchFakeEvent(button, 'touchstart');
12721266
fixture.detectChanges();
12731267

12741268
expect(event.defaultPrevented).toBe(false);
@@ -1279,10 +1273,7 @@ describe('MatTooltip', () => {
12791273
fixture.detectChanges();
12801274
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
12811275

1282-
const triggerRect = button.getBoundingClientRect();
1283-
const offsetX = triggerRect.right - 10;
1284-
const offsetY = triggerRect.top + 10;
1285-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1276+
dispatchFakeEvent(button, 'touchstart');
12861277
fixture.detectChanges();
12871278
tick(500); // Finish the open delay.
12881279
fixture.detectChanges();
@@ -1306,10 +1297,7 @@ describe('MatTooltip', () => {
13061297
fixture.detectChanges();
13071298
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
13081299

1309-
const triggerRect = button.getBoundingClientRect();
1310-
const offsetX = triggerRect.right - 10;
1311-
const offsetY = triggerRect.top + 10;
1312-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1300+
dispatchFakeEvent(button, 'touchstart');
13131301
fixture.detectChanges();
13141302
tick(500); // Finish the open delay.
13151303
fixture.detectChanges();
@@ -1474,16 +1462,16 @@ describe('MatTooltip', () => {
14741462
const fixture = TestBed.createComponent(BasicTooltipDemo);
14751463
fixture.detectChanges();
14761464
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
1477-
const triggerRect = button.getBoundingClientRect();
14781465

1479-
dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 10, triggerRect.top + 10);
1466+
dispatchFakeEvent(button, 'mouseenter');
14801467
fixture.detectChanges();
14811468
tick(500); // Finish the open delay.
14821469
fixture.detectChanges();
14831470
finishCurrentTooltipAnimation(overlayContainerElement, true);
14841471
assertTooltipInstance(fixture.componentInstance.tooltip, true);
14851472

14861473
// Simulate the pointer over the trigger.
1474+
const triggerRect = button.getBoundingClientRect();
14871475
const wheelEvent = createFakeEvent('wheel');
14881476
Object.defineProperties(wheelEvent, {
14891477
clientX: {get: () => triggerRect.left + 1},

‎src/material/tooltip/tooltip.spec.ts

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
dispatchFakeEvent,
1212
dispatchKeyboardEvent,
1313
dispatchMouseEvent,
14-
dispatchTouchEvent,
1514
patchElementFocus,
1615
} from '../../cdk/testing/private';
1716
import {
@@ -239,7 +238,7 @@ describe('MDC-based MatTooltip', () => {
239238
TestBed.resetTestingModule()
240239
.configureTestingModule({
241240
imports: [MatTooltipModule, OverlayModule],
242-
declarations: [WideTooltipDemo]
241+
declarations: [WideTooltipDemo],
243242
})
244243
.compileComponents();
245244

@@ -256,8 +255,12 @@ describe('MDC-based MatTooltip', () => {
256255
tick();
257256
expect(tooltipDirective._isTooltipVisible()).toBe(true);
258257

259-
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(triggerRect.right - 250);
260-
expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBeGreaterThanOrEqual(triggerRect.bottom);
258+
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBeLessThan(
259+
triggerRect.right - 250,
260+
);
261+
expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBeGreaterThanOrEqual(
262+
triggerRect.bottom,
263+
);
261264
}));
262265

263266
it('should be able to override the default positionAtOrigin', fakeAsync(() => {
@@ -287,7 +290,9 @@ describe('MDC-based MatTooltip', () => {
287290
tick();
288291
expect(tooltipDirective._isTooltipVisible()).toBe(true);
289292

290-
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBe(triggerRect.right - 100 - 20);
293+
expect(tooltipDirective._overlayRef!.overlayElement.offsetLeft).toBe(
294+
triggerRect.right - 100 - 20,
295+
);
291296
expect(tooltipDirective._overlayRef!.overlayElement.offsetTop).toBe(triggerRect.top + 100);
292297
}));
293298

@@ -1258,10 +1263,7 @@ describe('MDC-based MatTooltip', () => {
12581263
fixture.detectChanges();
12591264
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
12601265

1261-
const triggerRect = button.getBoundingClientRect();
1262-
const offsetX = triggerRect.right - 10;
1263-
const offsetY = triggerRect.top + 10;
1264-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1266+
dispatchFakeEvent(button, 'touchstart');
12651267
fixture.detectChanges();
12661268
tick(250); // Halfway through the delay.
12671269

@@ -1280,10 +1282,7 @@ describe('MDC-based MatTooltip', () => {
12801282
fixture.detectChanges();
12811283
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
12821284

1283-
const triggerRect = button.getBoundingClientRect();
1284-
const offsetX = triggerRect.right - 10;
1285-
const offsetY = triggerRect.top + 10;
1286-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1285+
dispatchFakeEvent(button, 'touchstart');
12871286
fixture.detectChanges();
12881287
tick(500); // Finish the delay.
12891288
fixture.detectChanges();
@@ -1296,10 +1295,7 @@ describe('MDC-based MatTooltip', () => {
12961295
const fixture = TestBed.createComponent(BasicTooltipDemo);
12971296
fixture.detectChanges();
12981297
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
1299-
const triggerRect = button.getBoundingClientRect();
1300-
const offsetX = triggerRect.right - 10;
1301-
const offsetY = triggerRect.top + 10;
1302-
const event = dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1298+
const event = dispatchFakeEvent(button, 'touchstart');
13031299
fixture.detectChanges();
13041300

13051301
expect(event.defaultPrevented).toBe(false);
@@ -1310,10 +1306,7 @@ describe('MDC-based MatTooltip', () => {
13101306
fixture.detectChanges();
13111307
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
13121308

1313-
const triggerRect = button.getBoundingClientRect();
1314-
const offsetX = triggerRect.right - 10;
1315-
const offsetY = triggerRect.top + 10;
1316-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1309+
dispatchFakeEvent(button, 'touchstart');
13171310
fixture.detectChanges();
13181311
tick(500); // Finish the open delay.
13191312
fixture.detectChanges();
@@ -1337,10 +1330,7 @@ describe('MDC-based MatTooltip', () => {
13371330
fixture.detectChanges();
13381331
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
13391332

1340-
const triggerRect = button.getBoundingClientRect();
1341-
const offsetX = triggerRect.right - 10;
1342-
const offsetY = triggerRect.top + 10;
1343-
dispatchTouchEvent(button, 'touchstart', offsetX, offsetY, offsetX, offsetY);
1333+
dispatchFakeEvent(button, 'touchstart');
13441334
fixture.detectChanges();
13451335
tick(500); // Finish the open delay.
13461336
fixture.detectChanges();
@@ -1472,9 +1462,8 @@ describe('MDC-based MatTooltip', () => {
14721462
const fixture = TestBed.createComponent(BasicTooltipDemo);
14731463
fixture.detectChanges();
14741464
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
1475-
const triggerRect = button.getBoundingClientRect();
14761465

1477-
dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 10, triggerRect.top + 10);
1466+
dispatchFakeEvent(button, 'mouseenter');
14781467
fixture.detectChanges();
14791468
tick(500); // Finish the open delay.
14801469
fixture.detectChanges();
@@ -1506,16 +1495,16 @@ describe('MDC-based MatTooltip', () => {
15061495
const fixture = TestBed.createComponent(BasicTooltipDemo);
15071496
fixture.detectChanges();
15081497
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
1509-
const triggerRect = button.getBoundingClientRect();
15101498

1511-
dispatchMouseEvent(button, 'mouseenter', triggerRect.right - 10, triggerRect.top + 10);
1499+
dispatchFakeEvent(button, 'mouseenter');
15121500
fixture.detectChanges();
15131501
tick(500); // Finish the open delay.
15141502
fixture.detectChanges();
15151503
finishCurrentTooltipAnimation(overlayContainerElement, true);
15161504
assertTooltipInstance(fixture.componentInstance.tooltip, true);
15171505

15181506
// Simulate the pointer over the trigger.
1507+
const triggerRect = button.getBoundingClientRect();
15191508
const wheelEvent = createFakeEvent('wheel');
15201509
Object.defineProperties(wheelEvent, {
15211510
clientX: {get: () => triggerRect.left + 1},

‎src/material/tooltip/tooltip.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
407407
}
408408

409409
/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
410-
show(delay: number = this.showDelay, origin?: { x: number, y: number }): void {
410+
show(delay: number = this.showDelay, origin?: {x: number; y: number}): void {
411411
if (
412412
this.disabled ||
413413
!this.message ||
@@ -442,7 +442,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
442442
}
443443

444444
/** Shows/hides the tooltip */
445-
toggle(origin?: { x: number; y: number; }): void {
445+
toggle(origin?: {x: number; y: number}): void {
446446
this._isTooltipVisible() ? this.hide() : this.show(undefined, origin);
447447
}
448448

@@ -452,10 +452,10 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
452452
}
453453

454454
/** Create the overlay config and position strategy */
455-
private _createOverlay(origin?: { x: number; y: number; }): OverlayRef {
455+
private _createOverlay(origin?: {x: number; y: number}): OverlayRef {
456456
if (this._overlayRef) {
457-
const existingStrategy =
458-
this._overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
457+
const existingStrategy = this._overlayRef.getConfig()
458+
.positionStrategy as FlexibleConnectedPositionStrategy;
459459

460460
if ((!this.positionAtOrigin || !origin) && existingStrategy._origin instanceof ElementRef) {
461461
return this._overlayRef;
@@ -471,7 +471,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
471471
// Create connected position strategy that listens for scroll events to reposition.
472472
const strategy = this._overlay
473473
.position()
474-
.flexibleConnectedTo(this.positionAtOrigin ? (origin || this._elementRef) : this._elementRef)
474+
.flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
475475
.withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
476476
.withFlexibleDimensions(false)
477477
.withViewportMargin(this._viewportMargin)
@@ -716,7 +716,11 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
716716
'mouseenter',
717717
event => {
718718
this._setupPointerExitEventsIfNeeded();
719-
this.show(undefined, { x: (event as MouseEvent).x, y: (event as MouseEvent).y });
719+
let point = undefined;
720+
if ((event as MouseEvent).x !== undefined && (event as MouseEvent).y !== undefined) {
721+
point = event as MouseEvent;
722+
}
723+
this.show(undefined, point);
720724
},
721725
]);
722726
} else if (this.touchGestures !== 'off') {
@@ -725,8 +729,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
725729
this._passiveListeners.push([
726730
'touchstart',
727731
event => {
728-
const touch = (event as TouchEvent).targetTouches[0];
729-
const origin = touch ? { x: touch.clientX, y: touch.clientY } : undefined;
732+
const touch = (event as TouchEvent).targetTouches?.[0];
733+
const origin = touch ? {x: touch.clientX, y: touch.clientY} : undefined;
730734
// Note that it's important that we don't `preventDefault` here,
731735
// because it can prevent click events from firing on the element.
732736
this._setupPointerExitEventsIfNeeded();

‎tools/public_api_guard/cdk/overlay.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
184184
// (undocumented)
185185
detach(): void;
186186
dispose(): void;
187+
_origin: FlexibleConnectedPositionStrategyOrigin;
187188
positionChanges: Observable<ConnectedOverlayPositionChange>;
188189
get positions(): ConnectionPositionPair[];
189190
_preferredPositions: ConnectionPositionPair[];

‎tools/public_api_guard/material/tooltip.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,19 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
107107
_overlayRef: OverlayRef | null;
108108
get position(): TooltipPosition;
109109
set position(value: TooltipPosition);
110-
show(delay?: number): void;
110+
// (undocumented)
111+
get positionAtOrigin(): boolean;
112+
set positionAtOrigin(value: BooleanInput);
113+
show(delay?: number, origin?: {
114+
x: number;
115+
y: number;
116+
}): void;
111117
get showDelay(): number;
112118
set showDelay(value: NumberInput);
113-
toggle(): void;
119+
toggle(origin?: {
120+
x: number;
121+
y: number;
122+
}): void;
114123
get tooltipClass(): string | string[] | Set<string> | {
115124
[key: string]: any;
116125
};
@@ -125,7 +134,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
125134
// (undocumented)
126135
protected _viewportMargin: number;
127136
// (undocumented)
128-
static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTooltipBase<any>, never, never, { "position": "matTooltipPosition"; "disabled": "matTooltipDisabled"; "showDelay": "matTooltipShowDelay"; "hideDelay": "matTooltipHideDelay"; "touchGestures": "matTooltipTouchGestures"; "message": "matTooltip"; "tooltipClass": "matTooltipClass"; }, {}, never, never, false>;
137+
static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTooltipBase<any>, never, never, { "position": "matTooltipPosition"; "positionAtOrigin": "matTooltipPositionAtOrigin"; "disabled": "matTooltipDisabled"; "showDelay": "matTooltipShowDelay"; "hideDelay": "matTooltipHideDelay"; "touchGestures": "matTooltipTouchGestures"; "message": "matTooltip"; "tooltipClass": "matTooltipClass"; }, {}, never, never, false>;
129138
// (undocumented)
130139
static ɵfac: i0.ɵɵFactoryDeclaration<_MatTooltipBase<any>, never>;
131140
}
@@ -135,6 +144,7 @@ export interface MatTooltipDefaultOptions {
135144
disableTooltipInteractivity?: boolean;
136145
hideDelay: number;
137146
position?: TooltipPosition;
147+
positionAtOrigin?: boolean;
138148
showDelay: number;
139149
touchendHideDelay: number;
140150
touchGestures?: TooltipTouchGestures;

0 commit comments

Comments
 (0)