diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss index 4f53397f25eb..1b69d057673f 100644 --- a/src/lib/tooltip/tooltip.scss +++ b/src/lib/tooltip/tooltip.scss @@ -5,8 +5,11 @@ $mat-tooltip-horizontal-padding: 8px; $mat-tooltip-max-width: 250px; $mat-tooltip-margin: 14px; -:host { - pointer-events: none; +.mat-tooltip-panel { + // The overlay reference updates the pointer-events style property directly on the HTMLElement + // depending on the state of the overlay. For tooltips the overlay panel should never enable + // pointer events. To overwrite the inline CSS from the overlay reference `!important` is needed. + pointer-events: none !important; } .mat-tooltip { diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 773808eb25fb..4262da61bd3c 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -15,12 +15,13 @@ import { import {AnimationEvent} from '@angular/animations'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from './index'; import {Directionality, Direction} from '../core/bidi/index'; import {OverlayModule, Scrollable, OverlayContainer} from '../core/overlay/index'; import {Platform} from '../core/platform/platform'; import {dispatchFakeEvent} from '../core/testing/dispatch-events'; - +import { + TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS +} from './index'; const initialTooltipMessage = 'initial tooltip message'; @@ -115,6 +116,18 @@ describe('MdTooltip', () => { expect(overlayContainerElement.textContent).toContain(initialTooltipMessage); })); + it('should set a css class on the overlay panel element', fakeAsync(() => { + tooltipDirective.show(); + fixture.detectChanges(); + tick(0); + + const overlayRef = tooltipDirective._overlayRef; + + expect(overlayRef).not.toBeNull(); + expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS, + 'Expected the overlay panel element to have the tooltip panel class set.'); + })); + it('should not show if disabled', fakeAsync(() => { // Test that disabling the tooltip will not set the tooltip visible tooltipDirective.disabled = true; diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 261b60a381b4..1f7ebdecaced 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -51,6 +51,9 @@ export const TOUCHEND_HIDE_DELAY = 1500; /** Time in ms to throttle repositioning after scroll events. */ export const SCROLL_THROTTLE_MS = 20; +/** CSS class that will be attached to the overlay panel. */ +export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel'; + /** Creates an error to be thrown if the user supplied an invalid tooltip position. */ export function getMdTooltipInvalidPositionError(position: string) { return Error(`Tooltip position "${position}" is invalid.`); @@ -264,6 +267,7 @@ export class MdTooltip implements OnDestroy { config.direction = this._dir ? this._dir.value : 'ltr'; config.positionStrategy = strategy; + config.panelClass = TOOLTIP_PANEL_CLASS; config.scrollStrategy = this._overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });