Angular 2 md-tooltip not working

Question

My tooltip doesn't seem to be working. I'm not sure why that is. Been looking around for known issues, but so far I haven't found anything.

Basically, I'm producing diverent divs with an ngFor. Every Div should have their own tooltip. I'm not getting any errors, I have imported the MdIconsModule and I'm using the latest version: @angular/material@2.0.0-beta.6

This is my HTML

<div *ngIf="selectedAfdeling">
  <h1>{{selectedAfdeling.afdelingsNaam}}</h1>
  <md-grid-list cols="3" rowHeight="1:1">
    <div *ngFor="let kamer of selectedAfdeling.kamers">
      <md-grid-tile>
        <div class="kamer" [style.width.px]="kamer.width" [style.height.px]="kamer.height"
             [style.background-color]="getKleur(kamer)" [routerLink]="['/patient', kamer.patient.id]">
          <div mdTooltip="Tooltip!" mdTooltipPosition="right">
            <div class="kamernr" *ngIf="kamerNummer">{{kamer.kamernummer}}</div>
            <div class="patientnaam" *ngIf="naam">{{kamer.patient.naam}}</div>
            <div class="behandeling" *ngIf="type">{{kamer.patient.behandelingstype}}</div>
            <div class="behandeling" *ngIf="tijd">{{kamer.patient.behandelingstijd}}</div>
            <footer class="faciliteiten">
              <span *ngIf="kinderruimte && kamer.kinderverzorgingsruimte"><md-icon>child_care</md-icon></span>
              <span *ngIf="salon && kamer.salon"><md-icon>event_seat</md-icon></span>
              <span *ngIf="sanitair && kamer.sanitair"><md-icon>wc</md-icon></span></footer>
          </div>
        </div>
      </md-grid-tile>
    </div>
  </md-grid-list>
</div>

I have been checking out the elements in chrome, and I did find the tooltip element:

<div _ngcontent-c9="" mdtooltip="Tooltip!" mdtooltipposition="right" ng-reflect-position="right" ng-reflect-message="Tooltip!" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <!--bindings={
  "ng-reflect-ng-if": "true"
}--><div _ngcontent-c9="" class="kamernr">3.011</div>
            <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            <footer _ngcontent-c9="" class="faciliteiten">
              <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
              <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
              <!--bindings={
  "ng-reflect-ng-if": "false"
}--></footer>
          </div>

module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {ReactiveFormsModule} from '@angular/forms';
import {ColorPickerModule} from 'angular2-color-picker';

import {AppComponent} from './app.component';
import {AfdelingenComponent} from './afdelingen/afdelingen.component';
import {RouterModule} from "@angular/router";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {
  MdCoreModule,
  MdInputModule,
  MdSelectModule,
  MdMenuModule,
  MdSidenavModule,
  MdToolbarModule,
  MdCheckboxModule,
  MdTabsModule,
  MdButtonModule,
  MdCardModule,
  MdIconModule,
  MdGridListModule,
  MdTooltipModule,
  MdSlideToggleModule,
  MdNativeDateModule,
  MdDatepickerModule,
} from '@angular/material';
import "hammerjs";
import {AfdelingService} from "./services/afdeling.service";
import {SidenavService} from './services/sidenav.service';
import {InstellingenComponent} from './instellingen/instellingen.component';
import {PatientComponent} from './patient/patient.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    AfdelingenComponent,
    InstellingenComponent,
    PatientComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    MdCardModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    MdInputModule,
    MdSelectModule,
    MdCoreModule,
    MdSidenavModule,
    MdNativeDateModule,
    MdMenuModule,
    MdButtonModule,
    MdCheckboxModule,
    ColorPickerModule,
    MdToolbarModule,
    MdIconModule,
    MdGridListModule,
    MdDatepickerModule,
    MdTooltipModule,
    MdTabsModule,
    MdSlideToggleModule,
    RouterModule.forRoot([
      { path: 'afdelingen/:afdelingsNaam',component: InstellingenComponent },
      { path: 'patient/:id', component: PatientComponent},
      { path: '', component: HomeComponent}
    ])
  ],
  providers: [AfdelingService, SidenavService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

Span worked for me as well, however upon further investigation, I realized my CSS was not following their guidelines. You must have a class or style that says "inline-flex" and "align-items: center", as follows:

 <div class="tooltip-container" mdTooltip="Tooltip!" mdTooltipPosition="right">
    <div class="kamernr" *ngIf="kamerNummer">{{kamer.kamernummer}}</div>
    <div class="patientnaam" *ngIf="naam">{{kamer.patient.naam}}</div>
    <div class="behandeling" *ngIf="type">{{kamer.patient.behandelingstype}}</div>
    <div class="behandeling" *ngIf="tijd">{{kamer.patient.behandelingstijd}}</div>
    <footer class="faciliteiten">
      <span *ngIf="kinderruimte && kamer.kinderverzorgingsruimte"><md-icon>child_care</md-icon></span>
      <span *ngIf="salon && kamer.salon"><md-icon>event_seat</md-icon></span>
      <span *ngIf="sanitair && kamer.sanitair"><md-icon>wc</md-icon></span></footer>
    </div>
  </div>

Then in your CSS:

  .tooltip-host {
    display: inline-flex;
    align-items: center;
  }

Also, make sure your first child element div CSS width is not interfering with the tooltip.

Answer 2

I was able to fix my issue by changing the div that my tooltip was in to a span.

Answer 3

Have you included a theme as instructed in the getting started guide, step 4?

I had the same problem and realized I had forgot this, it started working when I added this to index.html:

<link href="../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet"></link>