角2 MD-提示不工作

Question

我的提示似乎並不奏效。我不確定這是爲什麼。一直在尋找已知的問題，但到目前爲止我還沒有找到任何東西。

基本上，我產生具有ngFor diverent的div。每個部門都應該有自己的工具提示。 我沒有得到任何錯誤，我已導入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> 

我已經檢查出鉻元素，而且我也發現提示元素：

<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沒有遵守他們的指引。你必須有一個類或樣式，上面寫着「內聯-FLEX」和「對齊項：中心」，具體如下：

<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寬度不會干擾工具提示。