IgxGridのセルにツールチップを表示する

igxGridではバージョン10.1.0より、デフォルトのテンプレートを使用するセル(集計セルを含む)に自動的にツールチップが表示されるようになりました。

以下のように列でカスタムのテンプレートを設定しないデフォルトの状態で、セルにマウスホバーするとツールチップが表示されます。

<igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" width="500px" height="500px" >
  <igx-column field="ProductID" header="Product ID" >
  </igx-column>
  <igx-column field="ReorderLevel" header="ReorderLever" dataType="number">
  </igx-column>
  <igx-column field="ProductName" header="ProductName" [dataType]="'string'">
  </igx-column>
</igx-grid>

　

カスタムの列テンプレートを設定する場合は、以下のようにテンプレート内の要素にtitle属性を設定することにより、同様のツールチップを表示できます。

<igx-column field="ProductName" header="ProductName" [dataType]="'string'">
    <ng-template igxCell let-cell="cell">
      <div class="product_name" [title]="cell.value">
        {{cell.value}}
      </div>
    </ng-template>
  </igx-column>