Угловой материал: положение MatTooltip и стиль разрушены на MatIcon - PullRequest
Новая
       25

Угловой материал: положение MatTooltip и стиль разрушены на MatIcon

0 голосов
/ 25 января 2019

Я пытаюсь использовать значок материала в поле ввода материала.На этом значке должна отображаться всплывающая подсказка для материала.

В результате получилась хорошо анимированная, но полностью не стилизованная (как основной текст) подсказка с совершенно неправильной позицией.

Где я ошибся?

Мой 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 {
      background-color: @inputfield-disabled-color;
      color: dimgrey;
    }
  }
  .mat-form-field-label-wrapper {
    left: 0.6em;
    top: 0.3em;
    font-size: .8em;
  }
}

// here I tried to fix it, but it had no effect:    
.input-tooltip-icon {
  position: absolute;
  z-index: 1;
  top: .3em;
  right: -.50em;
  cursor: context-menu;
  color: @button-color;
}

Вот как это выглядит: enter image description here

...