Усеченная строка убила мою всплывающую подсказку, как ее вернуть (угловая)

Question

У меня есть угловой ngx-datatable-column, который дает пользователю всплывающую подсказку при наведении мыши.

 <ngx-datatable-column name="Standort" prop="Location" [flexGrow]="1">
    <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
      <span (click)="sort($event, sortDir, sortFn)"   >Standort</span>
    </ng-template>
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
        <span>{{value}}</span>
    </ng-template>
    </ngx-datatable-column>

Но строки были слишком длинными, поэтому я обрезал их следующим образом:

<span>{{ (value.length>15)? (value | slice:0:15)+'..':(value) }}</span>

Поступив таким образом Я, к сожалению, потерял всплывающую подсказку. Как я могу получить ее обратно? Моей первоначальной идеей было вызвать функцию из span следующим образом:

<span (mouseover)="myCallHoverFunction(value)"   >{{ (value.length>15)? (value | slice:0:15)+'..':(value) }}</span>

здесьфункция в файле машинописи:

myCallHoverFunction(nameToDisplay:string):string{
    console.log(nameToDisplay);
    return nameToDisplay;
  }

Но что именно я должен поместить в myCallHoverFunction(), если я хочу, чтобы она отображалась как всплывающая подсказка при событии наведения мыши?Кроме того, я чувствую, что это может быть не лучшим подходом, поэтому, если кто-то знает лучший, пожалуйста, поделитесь им со мной.

Answer 1

Я нашел решение: просто используйте «title» в span.Функция машинописи не требуется.Убедитесь, что значение указано в двойных фигурных скобках.

 <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex"    ngx-datatable-cell-template>
          <span title="{{value}}">{{ (value.length>100)? (value | slice:0:100)+'..':(value) }}</span>
 </ng-template>