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中的元素，我确实找到了工具提示元素：

<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更改为跨度来解决我的问题。

Answer 3

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

await AppServices.StartSingleAppService<UpdateService>();

然后在你的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>

另外，请确保您的第一个子元素div CSS宽度不会干扰工具提示。

Angular 2 md-tooltip无法正常工作

3 个答案: