fix(tooltip): match mobile dimensions from spec

Updates the various tooltip dimensions to match [the spec on mobile](https://material.io/guidelines/components/tooltips.html#tooltips-tooltips-mobile).

Fixes #9039.

Author: crisbeto

src/lib/tooltip/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
     "//src/cdk/keycodes",
     "//src/cdk/portal",
     "//src/cdk/scrolling",
+    "//src/cdk/layout",
     "@rxjs",
   ],
   tsconfig = ":tsconfig-build.json",

src/lib/tooltip/_tooltip-theme.scss

@@ -2,12 +2,15 @@
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
 
-// TODO(crisbeto): these doesn't correspond to any typography levels
-// and the width/height appear to be off from the spec.
 $mat-tooltip-target-height: 22px;
 $mat-tooltip-font-size: 10px;
 $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
 
+$mat-tooltip-handset-target-height: 32px;
+$mat-tooltip-handset-font-size: 14px;
+$mat-tooltip-handset-vertical-padding:
+    ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;
+
 @mixin mat-tooltip-theme($theme) {
   .mat-tooltip {
     background: mat-color($mat-grey, 700, 0.9);
@@ -21,4 +24,10 @@ $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-s
     padding-top: $mat-tooltip-vertical-padding;
     padding-bottom: $mat-tooltip-vertical-padding;
   }
+
+  .mat-tooltip-handset {
+    font-size: $mat-tooltip-handset-font-size;
+    padding-top: $mat-tooltip-handset-vertical-padding;
+    padding-bottom: $mat-tooltip-handset-vertical-padding;
+  }
 }

src/lib/tooltip/tooltip-module.ts

@@ -12,6 +12,7 @@ import {PlatformModule} from '@angular/cdk/platform';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
+import {LayoutModule} from '@angular/cdk/layout';
 import {
   MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER,
   MAT_TOOLTIP_DEFAULT_OPTIONS,
@@ -27,6 +28,7 @@ import {
     MatCommonModule,
     PlatformModule,
     A11yModule,
+    LayoutModule,
   ],
   exports: [MatTooltip, TooltipComponent, MatCommonModule],
   declarations: [MatTooltip, TooltipComponent],

src/lib/tooltip/tooltip.html

@@ -1,5 +1,6 @@
 <div class="mat-tooltip"
      [ngClass]="tooltipClass"
+     [class.mat-tooltip-handset]="(_isHandset | async)!.matches"
      [style.transform-origin]="_transformOrigin"
      [@state]="_visibility"
      (@state.start)="_animationStart()"

src/lib/tooltip/tooltip.scss

@@ -5,6 +5,9 @@ $mat-tooltip-horizontal-padding: 8px;
 $mat-tooltip-max-width: 250px;
 $mat-tooltip-margin: 14px;
 
+$mat-tooltip-handset-horizontal-padding: 16px;
+$mat-tooltip-handset-margin: 24px;
+
 .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
@@ -24,3 +27,9 @@ $mat-tooltip-margin: 14px;
     outline: solid 1px;
   }
 }
+
+.mat-tooltip-handset {
+  margin: $mat-tooltip-handset-margin;
+  padding-left: $mat-tooltip-handset-horizontal-padding;
+  padding-right: $mat-tooltip-handset-horizontal-padding;
+}

src/lib/tooltip/tooltip.spec.ts

@@ -481,7 +481,7 @@ describe('MatTooltip', () => {
     it('should have consistent right transform origin in any dir', () => {
       // Move the button away from the edge of the screen so
       // we don't get into the fallback positions.
-      fixture.componentInstance.button.nativeElement.style.margin = '200px';
+      fixture.componentInstance.button.nativeElement.style.margin = '300px';
 
       tooltipDirective.position = 'left';
       tooltipDirective.show();

src/lib/tooltip/tooltip.ts

@@ -45,6 +45,7 @@ import {
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {matTooltipAnimations} from './tooltip-animations';
+import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
 
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -516,7 +517,12 @@ export class TooltipComponent {
   /** Subject for notifying that the tooltip has been hidden from the view */
   private readonly _onHide: Subject<any> = new Subject();
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  /** Stream that emits whether the user has a handset-sized display.  */
+  _isHandset: Observable<BreakpointState> = this._breakpointObserver.observe(Breakpoints.Handset);
+
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _breakpointObserver: BreakpointObserver) {}
 
   /**
    * Shows the tooltip with an animation originating from the provided origin