Tooltips in icon column

[mayraGL]

Is there any way to add a tooltip to an icon inside a cell?

I tried to do it this way and this worked for me

<i class="icon-ok-sign" rel="tooltip" title="Key active" ></i>

but I would like to do it with mdTooltip (Angular Material) and it does not work

[hjalmers]

Hi @mayra268, you need to wrap it in a component. Here's an example that uses ngbTooltip and a service to fetch the description using the costType name.

import { Component, OnInit} from '@angular/core';
import {GtCustomComponent} from "@angular-generic-table/core";
import {CostTypeService} from '../../services/cost-type.service';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'cost-type',
  template: `
    <span ngbTooltip="{{costTypeDescription | async}}">{{row.costType}} </span>
  `,
  styles: [
    `span {
      cursor:help;
    }`
  ]
})
export class CostTypeComponent extends GtCustomComponent<any> implements OnInit  {

  costTypeDescription:Observable<string>;
  constructor(private costTypeService:CostTypeService) {
    super();
  }

  ngOnInit() {
    this.costTypeDescription = this.costTypeService.getDescription(this.row.costType);
  }

}

And the field config:

fields: [ ...
{
  name: 'Cost type',
  objectKey: 'costType',
  columnComponent = {
    type: CostTypeComponent
  }
}]