diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 822ffa9a7047..0364af21f4d8 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -21,6 +21,9 @@ export type ImmutableObject = { readonly [P in keyof T]: T[P]; }; +// TODO(crisbeto): add support for passing in a `Directionality` +// to make syncing the direction easier. + /** * Reference to an overlay that has been created with the Overlay service. * Used to manipulate or dispose of said overlay. diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 4a8044293f9c..abc1c64229dd 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -503,6 +503,28 @@ describe('MatTooltip', () => { expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.'); })); + it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => { + dir.value = 'rtl'; + tooltipDirective.show(); + tick(); + fixture.detectChanges(); + + let tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!; + expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL.'); + + tooltipDirective.hide(0); + tick(); + fixture.detectChanges(); + + dir.value = 'ltr'; + tooltipDirective.show(); + tick(); + fixture.detectChanges(); + + tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!; + expect(tooltipWrapper.getAttribute('dir')).toBe('ltr', 'Expected tooltip to be in LTR.'); + })); + it('should be able to set the tooltip message as a number', fakeAsync(() => { fixture.componentInstance.message = 100; fixture.detectChanges(); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 4b9d64428375..c85d9d8dbf31 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -262,6 +262,7 @@ export class MatTooltip implements OnDestroy { const overlayRef = this._createOverlay(); this._detach(); + overlayRef.setDirection(this._dir ? this._dir.value : 'ltr'); this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef); this._tooltipInstance = overlayRef.attach(this._portal).instance; this._tooltipInstance.afterHidden() @@ -308,20 +309,12 @@ export class MatTooltip implements OnDestroy { return this._overlayRef; } - const origin = this._getOrigin(); - const overlay = this._getOverlayPosition(); - const direction = this._dir ? this._dir.value : 'ltr'; - // Create connected position strategy that listens for scroll events to reposition. const strategy = this._overlay.position() .flexibleConnectedTo(this._elementRef) .withTransformOriginOn('.mat-tooltip') .withFlexibleDimensions(false) - .withViewportMargin(8) - .withPositions([ - {...origin.main, ...overlay.main}, - {...origin.fallback, ...overlay.fallback} - ]); + .withViewportMargin(8); const scrollableAncestors = this._scrollDispatcher .getAncestorScrollContainers(this._elementRef); @@ -339,12 +332,13 @@ export class MatTooltip implements OnDestroy { }); this._overlayRef = this._overlay.create({ - direction, positionStrategy: strategy, panelClass: TOOLTIP_PANEL_CLASS, scrollStrategy: this._scrollStrategy() }); + this._updatePosition(); + this._overlayRef.detachments() .pipe(takeUntil(this._destroyed)) .subscribe(() => this._detach()); @@ -368,11 +362,10 @@ export class MatTooltip implements OnDestroy { const origin = this._getOrigin(); const overlay = this._getOverlayPosition(); - position - .withPositions([ - {...origin.main, ...overlay.main}, - {...origin.fallback, ...overlay.fallback} - ]); + position.withPositions([ + {...origin.main, ...overlay.main}, + {...origin.fallback, ...overlay.fallback} + ]); } /**