截断字符串杀死了我的悬停工具提示，如何找回它 (angular)

Question

我有一个 angular 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>

通过这样做我不幸丢失了悬停tooltip.How我可以找回它吗？ 我最初的想法是像这样从 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

我想出了一个解决方案：只需在 span 中使用 'title'。不需要打字稿功能。确保 'value' 在双花括号中。

 <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>

截断字符串杀死了我的悬停工具提示，如何找回它 (angular)

Truncating String killed my hovering tooltip, how to get it back (angular)

tooltip

typescript

angular