fix(tooltip): panel element blocks hover effects

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 {

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;

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
     });