この KB は 製品バージョン 10.0.6 をベースにしています。

セルに表示している内容をツールチップに出すには、ng-templateを利用して、標準のツールチップをspanタグで表示したりIgxTooltipで表示したりできます。

<igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false">
  <igx-column field="ProductId" header="製品ID">
    <!-- 標準のツールチップを使用する場合 -->
    <ng-template igxCell let-cell="cell" let-val>
      <span title="{{val}}">
        {{val}}
      </span>
    </ng-template>
  </igx-column>
  <igx-column field="ProductName" header="製品名">
    <!-- IgxTooltipを使用する場合 -->
    <ng-template igxCell let-cell="cell" let-val>
      <span #target="tooltipTarget" [igxTooltipTarget]="tooltipRef">
        {{val}}
      </span>
      <div #tooltipRef="tooltip" igxTooltip>
        {{val}}
      </div>
    </ng-template>
  </igx-column>
  ...
</igx-grid>

 

実行結果

標準のツールチップを使用した場合

IgxTooltipを使用した場合

 

サンプル

 

リファレンス

 

 

製品について

Ignite UI for Angular