小编Jan*_*ana的帖子

我正在尝试在材质输入字段中使用材质图标。该图标应显示材质工具提示。

结果是一个很好的动画，但完全没有样式（如主文本）并且工具提示的位置完全错误。

我哪里做错了？

我的HTML：

<section>
    <div class="row">
      <mat-form-field>
        <input matInput name="newPin" placeholder="Neue PIN" required type="password"
           [(ngModel)]="newPin" [disabled]="!selectedToken">          
          <mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
              info
          </mat-icon>         
      </mat-form-field>
      <mat-form-field>
        <input matInput name="controlPin" type="password" required 
           placeholder="Neue PIN wiederholen"
           [(ngModel)]="controlPin" [disabled]="!selectedToken">
      </mat-form-field>
    </div>
</section>

还有我的少：

body {
  font-family: Helvetica, FreeSans, sans-serif;
  background-image: url('./assets/images/background.jpg');
}

section {
  margin-top: 2em;
}

.row {
  margin-bottom: 1rem;
}

mat-form-field {
  color: @inputfield-text-color;
  width: 95%;
  margin-bottom: .5em;

  .mat-input-element {
    background-color: @inputfield-background-color;
    border-radius: .3em;
    padding: 1em 0.6em 0.2em 0.6em;
    line-height: 1.7em;
    &:disabled { …