Tooltip with custom position

/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',

    // Angular specific mappings.
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/animations': 'https://unpkg.com/@angular/animations/bundles/animations.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
    '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/material': 'https://unpkg.com/@angular/material@2.0.0-beta.7/bundles/material.umd.js',
    '@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',

    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MaterialModule, MdNativeDateModule} from '@angular/material';
import {TooltipPositionExample} from './tooltip-position-example';
import {HttpModule} from '@angular/http';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    FlexLayoutModule,
    MdNativeDateModule,
    ReactiveFormsModule,
  ],

  declarations: [TooltipPositionExample],
  bootstrap: [TooltipPositionExample],
  providers: []
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);


/**  Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

import {Component} from '@angular/core';
import {MediaChange, ObservableMedia} from "@angular/flex-layout";


@Component({
  selector: 'tooltip-position-example',
  templateUrl: 'tooltip-position-example.html',
  styleUrls: ['tooltip-position-example.css'],
})
export class TooltipPositionExample {
  
  disableTooltip: boolean = false;
  
  constructor(media: ObservableMedia) {
      media.asObservable()
        .subscribe((change: MediaChange) => {
        // alert(change.mqAlias);  
        console.log(change.mqAlias);
          if(change.mqAlias == 'sm' || change.mqAlias == 'xs'){
            this.disableTooltip = true;
          }
          else{
            this.disableTooltip = false;
          }
        });
  }
}

.example-tooltip-host {
  display: inline-flex;
  align-items: center;
  margin: 50px;
}

.example-select {
  margin: 0 10px;
}


.containerX {
  border: solid 1px #b6b6b6;
}

.colorNested, .colored, .coloredContainerX {
  height:200px;
}

md-card {
  background-color: white;
}

div.coloredContainerX > div, div.colorNested > div > div {
  padding: 8px;
  box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
  opacity: 0.9;
  color: #fff;
  text-align: center;
}

div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1) {
  background-color: #009688;
}

div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2) {
  background-color: #3949ab;
}

div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3) {
  background-color: #9c27b0;
}

div.coloredContainerX > div:nth-child(4), div.coloredChildren > div:nth-child(4), div.colorNested > div > div:nth-child(4) {
  background-color: #b08752;
}

div.coloredContainerX > div:nth-child(5), div.coloredChildren > div:nth-child(5), div.colorNested > div > div:nth-child(5) {
  background-color: #5ca6b0;
}

div.colored > div {
  padding: 8px;
  box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
  opacity: 0.9;
  color: #fff;
  text-align: center;
}

div.colored > div:nth-child(1), .one {
  background-color: #009688;
}

div.colored > div:nth-child(2), .two {
  background-color: #3949ab;
}

div.colored > div:nth-child(3), .three {
  background-color: #9c27b0;
}


div.colored > div:nth-child(4), .four {
  background-color: #8bc34a;
}

div.colored > div:nth-child(5), .five {
  background-color: #03A9F4;
}

div.colored > div:nth-child(6), .six {
  background-color: #c9954e;
}

div.colored > div:nth-child(7), .seven {
  background-color: #FF5722;
}

.hint {
  margin:5px;
  font-size:0.9em;
  color: #a3a3a3;
  margin-bottom:0;
}

.title {
  margin:5px;
  font-size:0.9em;
  color: #5c5c5c;
}

.box {
  border: solid 1px gray;
}


button.md-primary {
  margin-left:25px;
}

.demo-content {
  background-color: ghostwhite;
}

md-toolbar-row  button {
  min-width: 150px;
}

div.colored.box.nopad > div {
  padding: 0;
}

.intro {
  margin-top: -52px;
  margin-left: 15px;
  color: #5c5c5c;
}

.version {
  font-size:0.8em;
  color: #aeaeae;
  margin-top:20px;
}



.blocks {
  min-width: 75px;
  min-height: 50px;
}


html, body {
      height:100%;
      min-height:100vh;
}

<!DOCTYPE html>
<html>
<head>
  <title>Angular Material Plunker</title>

  <!-- Load common libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.1/typescript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.5/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

  <!-- Configure SystemJS -->
  <script src="systemjs.config.js"></script>

  <script>
    System
      .import('main.ts')
      .catch(console.error.bind(console));
  </script>

  <!-- Load the Angular Material stylesheet -->
  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>body { font-family: Roboto, Arial, sans-serif; }</style>
</head>

<body>
<tooltip-position-example>Loading Material Docs example...</tooltip-position-example>
</body>

</html>


<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

<div class="container" 
     fxLayout fxLayout.xs="column" 
    fxLayoutAlign="center" 
    fxLayoutGap="10px" 
    fxLayoutGap.xs="0">
  <div fxFlex="30%">
      <md-card>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
          <h3>Last 30 Days</h3>
      </md-card>
  </div>
  <div fxFlex="70%" fxLayoutAlign=" stretch">
      <md-card>
          <h3>24 hours of OEE (target: {{target}}%): (target: {{target}}%): (target: {{target}}%):  (target: {{target}}%):(target: {{target}}%):(target: {{target}}%):</h3>
      </md-card>
  </div>
</div>


<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

## flex-layout make divs same height