mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat(tooltip): allow for default position to be configured (#14872)
Allows for the default position of `MatTooltip` to be set via an injection token. Fixes #14862.
This commit is contained in:
committed by
Andrew Seguin
parent
5542d0ae6b
commit
342e6f0ad8
@@ -204,6 +204,33 @@ describe('MatTooltip', () => {
|
||||
expect(tooltipDirective._isTooltipVisible()).toBe(false);
|
||||
}));
|
||||
|
||||
it('should be able to override the default position', fakeAsync(() => {
|
||||
TestBed
|
||||
.resetTestingModule()
|
||||
.configureTestingModule({
|
||||
imports: [MatTooltipModule, OverlayModule, NoopAnimationsModule],
|
||||
declarations: [TooltipDemoWithoutPositionBinding],
|
||||
providers: [{
|
||||
provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
|
||||
useValue: {position: 'right'}
|
||||
}]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
const newFixture = TestBed.createComponent(TooltipDemoWithoutPositionBinding);
|
||||
newFixture.detectChanges();
|
||||
tooltipDirective = newFixture.debugElement.query(By.css('button'))
|
||||
.injector.get<MatTooltip>(MatTooltip);
|
||||
|
||||
tooltipDirective.show();
|
||||
newFixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(tooltipDirective.position).toBe('right');
|
||||
expect(tooltipDirective._getOverlayPosition().main.overlayX).toBe('start');
|
||||
expect(tooltipDirective._getOverlayPosition().fallback.overlayX).toBe('end');
|
||||
}));
|
||||
|
||||
it('should set a css class on the overlay panel element', fakeAsync(() => {
|
||||
tooltipDirective.show();
|
||||
fixture.detectChanges();
|
||||
@@ -995,6 +1022,15 @@ class TooltipOnDraggableElement {
|
||||
@ViewChild('button') button: ElementRef;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
template: `<button #button [matTooltip]="message">Button</button>`
|
||||
})
|
||||
class TooltipDemoWithoutPositionBinding {
|
||||
message: any = initialTooltipMessage;
|
||||
@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 {
|
||||
|
||||
@@ -82,6 +82,7 @@ export interface MatTooltipDefaultOptions {
|
||||
showDelay: number;
|
||||
hideDelay: number;
|
||||
touchendHideDelay: number;
|
||||
position?: TooltipPosition;
|
||||
}
|
||||
|
||||
/** Injection token to be used to override the default options for `matTooltip`. */
|
||||
@@ -254,6 +255,10 @@ export class MatTooltip implements OnDestroy {
|
||||
_ngZone.run(() => this.show());
|
||||
}
|
||||
});
|
||||
|
||||
if (_defaultOptions && _defaultOptions.position) {
|
||||
this.position = _defaultOptions.position;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+1
@@ -49,6 +49,7 @@ export declare const matTooltipAnimations: {
|
||||
|
||||
export interface MatTooltipDefaultOptions {
|
||||
hideDelay: number;
|
||||
position?: TooltipPosition;
|
||||
showDelay: number;
|
||||
touchendHideDelay: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user