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 cf164fec5753..a8633919112c 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -12,16 +12,21 @@ import { ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { + TooltipPosition, + MdTooltip, + MdTooltipModule, + SCROLL_THROTTLE_MS, + TOOLTIP_PANEL_CLASS +} from './index'; 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 '@angular/cdk/testing'; - const initialTooltipMessage = 'initial tooltip message'; describe('MdTooltip', () => { @@ -115,6 +120,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 a2692b157c12..2ee2389ba964 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.`); @@ -274,6 +277,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 });