@@ -11,6 +11,7 @@ import {
11
11
dispatchFakeEvent ,
12
12
dispatchKeyboardEvent ,
13
13
dispatchMouseEvent ,
14
+ dispatchTouchEvent ,
14
15
patchElementFocus ,
15
16
} from '../../cdk/testing/private' ;
16
17
import {
@@ -232,6 +233,63 @@ describe('MatTooltip', () => {
232
233
expect ( tooltipDirective . _getOverlayPosition ( ) . fallback . overlayX ) . toBe ( 'end' ) ;
233
234
} ) ) ;
234
235
236
+ it ( 'should position center-bottom by default' , fakeAsync ( ( ) => {
237
+ TestBed . resetTestingModule ( )
238
+ . configureTestingModule ( {
239
+ imports : [ MatLegacyTooltipModule , OverlayModule ] ,
240
+ declarations : [ WideTooltipDemo ]
241
+ } )
242
+ . compileComponents ( ) ;
243
+
244
+ const wideFixture = TestBed . createComponent ( WideTooltipDemo ) ;
245
+ wideFixture . detectChanges ( ) ;
246
+ tooltipDirective = wideFixture . debugElement
247
+ . query ( By . css ( 'button' ) ) !
248
+ . injector . get < MatLegacyTooltip > ( MatLegacyTooltip ) ;
249
+ const button : HTMLButtonElement = wideFixture . nativeElement . querySelector ( 'button' ) ;
250
+ const triggerRect = button . getBoundingClientRect ( ) ;
251
+
252
+ dispatchMouseEvent ( button , 'mouseenter' , triggerRect . right - 100 , triggerRect . top + 100 ) ;
253
+ wideFixture . detectChanges ( ) ;
254
+ tick ( ) ;
255
+ expect ( tooltipDirective . _isTooltipVisible ( ) ) . toBe ( true ) ;
256
+
257
+ expect ( tooltipDirective . _overlayRef ! . overlayElement . offsetLeft ) . toBeGreaterThan ( triggerRect . left + 200 ) ;
258
+ expect ( tooltipDirective . _overlayRef ! . overlayElement . offsetLeft ) . toBeLessThan ( triggerRect . left + 300 ) ;
259
+ expect ( tooltipDirective . _overlayRef ! . overlayElement . offsetTop ) . toBe ( triggerRect . bottom ) ;
260
+ } ) ) ;
261
+
262
+ it ( 'should be able to override the default positionAtOrigin' , fakeAsync ( ( ) => {
263
+ TestBed . resetTestingModule ( )
264
+ . configureTestingModule ( {
265
+ imports : [ MatLegacyTooltipModule , OverlayModule ] ,
266
+ declarations : [ WideTooltipDemo ] ,
267
+ providers : [
268
+ {
269
+ provide : MAT_TOOLTIP_DEFAULT_OPTIONS ,
270
+ useValue : { positionAtOrigin : true } ,
271
+ } ,
272
+ ] ,
273
+ } )
274
+ . compileComponents ( ) ;
275
+
276
+ const wideFixture = TestBed . createComponent ( WideTooltipDemo ) ;
277
+ wideFixture . detectChanges ( ) ;
278
+ tooltipDirective = wideFixture . debugElement
279
+ . query ( By . css ( 'button' ) ) !
280
+ . injector . get < MatLegacyTooltip > ( MatLegacyTooltip ) ;
281
+ const button : HTMLButtonElement = wideFixture . nativeElement . querySelector ( 'button' ) ;
282
+ const triggerRect = button . getBoundingClientRect ( ) ;
283
+
284
+ dispatchMouseEvent ( button , 'mouseenter' , triggerRect . left + 50 , triggerRect . bottom - 10 ) ;
285
+ wideFixture . detectChanges ( ) ;
286
+ tick ( ) ;
287
+ expect ( tooltipDirective . _isTooltipVisible ( ) ) . toBe ( true ) ;
288
+
289
+ expect ( tooltipDirective . _overlayRef ! . overlayElement . offsetLeft ) . toBe ( triggerRect . left + 28 ) ;
290
+ expect ( tooltipDirective . _overlayRef ! . overlayElement . offsetTop ) . toBe ( triggerRect . bottom - 10 ) ;
291
+ } ) ) ;
292
+
235
293
it ( 'should be able to disable tooltip interactivity' , fakeAsync ( ( ) => {
236
294
TestBed . resetTestingModule ( )
237
295
. configureTestingModule ( {
@@ -1169,7 +1227,10 @@ describe('MatTooltip', () => {
1169
1227
fixture . detectChanges ( ) ;
1170
1228
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1171
1229
1172
- dispatchFakeEvent ( button , 'touchstart' ) ;
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 ) ;
1173
1234
fixture . detectChanges ( ) ;
1174
1235
tick ( 250 ) ; // Halfway through the delay.
1175
1236
@@ -1188,7 +1249,10 @@ describe('MatTooltip', () => {
1188
1249
fixture . detectChanges ( ) ;
1189
1250
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1190
1251
1191
- dispatchFakeEvent ( button , 'touchstart' ) ;
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 ) ;
1192
1256
fixture . detectChanges ( ) ;
1193
1257
tick ( 500 ) ; // Finish the delay.
1194
1258
fixture . detectChanges ( ) ;
@@ -1201,7 +1265,10 @@ describe('MatTooltip', () => {
1201
1265
const fixture = TestBed . createComponent ( BasicTooltipDemo ) ;
1202
1266
fixture . detectChanges ( ) ;
1203
1267
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1204
- const event = dispatchFakeEvent ( button , 'touchstart' ) ;
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 ) ;
1205
1272
fixture . detectChanges ( ) ;
1206
1273
1207
1274
expect ( event . defaultPrevented ) . toBe ( false ) ;
@@ -1212,7 +1279,10 @@ describe('MatTooltip', () => {
1212
1279
fixture . detectChanges ( ) ;
1213
1280
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1214
1281
1215
- dispatchFakeEvent ( button , 'touchstart' ) ;
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 ) ;
1216
1286
fixture . detectChanges ( ) ;
1217
1287
tick ( 500 ) ; // Finish the open delay.
1218
1288
fixture . detectChanges ( ) ;
@@ -1236,7 +1306,10 @@ describe('MatTooltip', () => {
1236
1306
fixture . detectChanges ( ) ;
1237
1307
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1238
1308
1239
- dispatchFakeEvent ( button , 'touchstart' ) ;
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 ) ;
1240
1313
fixture . detectChanges ( ) ;
1241
1314
tick ( 500 ) ; // Finish the open delay.
1242
1315
fixture . detectChanges ( ) ;
@@ -1401,16 +1474,16 @@ describe('MatTooltip', () => {
1401
1474
const fixture = TestBed . createComponent ( BasicTooltipDemo ) ;
1402
1475
fixture . detectChanges ( ) ;
1403
1476
const button : HTMLButtonElement = fixture . nativeElement . querySelector ( 'button' ) ;
1477
+ const triggerRect = button . getBoundingClientRect ( ) ;
1404
1478
1405
- dispatchFakeEvent ( button , 'mouseenter' ) ;
1479
+ dispatchMouseEvent ( button , 'mouseenter' , triggerRect . right - 10 , triggerRect . top + 10 ) ;
1406
1480
fixture . detectChanges ( ) ;
1407
1481
tick ( 500 ) ; // Finish the open delay.
1408
1482
fixture . detectChanges ( ) ;
1409
1483
finishCurrentTooltipAnimation ( overlayContainerElement , true ) ;
1410
1484
assertTooltipInstance ( fixture . componentInstance . tooltip , true ) ;
1411
1485
1412
1486
// Simulate the pointer over the trigger.
1413
- const triggerRect = button . getBoundingClientRect ( ) ;
1414
1487
const wheelEvent = createFakeEvent ( 'wheel' ) ;
1415
1488
Object . defineProperties ( wheelEvent , {
1416
1489
clientX : { get : ( ) => triggerRect . left + 1 } ,
@@ -1556,6 +1629,17 @@ class TooltipDemoWithoutPositionBinding {
1556
1629
@ViewChild ( 'button' ) button : ElementRef < HTMLButtonElement > ;
1557
1630
}
1558
1631
1632
+ @Component ( {
1633
+ selector : 'app' ,
1634
+ styles : [ `button { width: 500px; height: 500px; }` ] ,
1635
+ template : `<button #button [matTooltip]="message">Button</button>` ,
1636
+ } )
1637
+ class WideTooltipDemo {
1638
+ message = 'Test' ;
1639
+ @ViewChild ( MatLegacyTooltip ) tooltip : MatLegacyTooltip ;
1640
+ @ViewChild ( 'button' ) button : ElementRef < HTMLButtonElement > ;
1641
+ }
1642
+
1559
1643
/** Asserts whether a tooltip directive has a tooltip instance. */
1560
1644
function assertTooltipInstance ( tooltip : MatLegacyTooltip , shouldExist : boolean ) : void {
1561
1645
// Note that we have to cast this to a boolean, because Jasmine will go into an infinite loop
0 commit comments