Angular 2 md-tooltip 不起作用

Question

我的工具提示似乎不起作用。我不确定为什么会这样。一直在寻找已知问题，但到目前为止我还没有找到任何东西。

基本上，我正在使用 ngFor 生成不同的 div。每个 Div 都应该有自己的工具提示。 我没有收到任何错误，我已经导入了 MdIconsModule 并且我使用的是最新版本：@angular/material@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>

我一直在查看chrome中的元素，确实找到了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

您是否按照getting started guide, step 4 中的说明添加了主题？

我遇到了同样的问题并意识到我忘记了这个，当我将它添加到 index.html 时它开始工作：

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

Answer 2

我可以通过将工具提示所在的 div 更改为 span 来解决我的问题。

Answer 3

Span 也适用于我，但经过进一步调查，我意识到我的 CSS 没有遵循他们的指导方针。您必须有一个显示“inline-flex”和“align-items: center”的类或样式，如下所示：

 <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 宽度不会干扰工具提示。