角2mdのツールチップが動作しない

Question

ツールチップが機能していないようです。私はそれがなぜであるかわからない。既知の問題を探し回っていましたが、これまで何も見つかりませんでした。

基本的に、私はngForで潜水艦を作っています。すべての部門には独自のツールチップが必要です。 私は、私がMdIconsModuleを輸入していると私は最新バージョンを使用しているすべてのエラーを取得していないよ：2.0.0-beta.6

@角度@ /材料これがされて私の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> 

私はクロームの要素をチェックアウトされている、と私はtooltip要素を見つけた：

<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

私は私のdivを変更することで、私の問題を解決することができましたツールチップはある範囲にありました。

Answer 2

getting started guide, step 4の指示に従ってテーマを追加しましたか？

私は同じ問題を抱えていたし、私はこのことを忘れていた実現、私はindex.htmlをにこれを追加したときには、作業を開始しました：

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

Answer 3

スパンも私のために働いていましたが、詳しい調査の結果、私のCSSはガイドラインに従っていないことに気付きました。あなたは「インライン・フレックス」と言うクラスやスタイルを持っていると「-アイテムを揃える：センター」必要があり、次のように：

<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> 

次に、あなたのCSSに：

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

また、あなたのことを確認してください最初の子要素div CSSの幅はツールチップに干渉していません。