Aggrid ITooltipAngularComp not showing

Question

I try to use ITooltipAngularComp to show a custom toolitp on ag grid angular ( v 20.1.0 ).

Here is the ag-grid call :

<ag-grid-angular
    class="ag-theme-balham"
    rowSelection="single"
    (gridReady)="onGridReady($event)"
    [gridOptions]="gridOptions"
    [defaultColDef]="defaultColDef"
    [frameworkComponents]="frameworkComponents"
    >
</ag-grid-angular>

With :

defaultColDef = {
  "tooltipComponent": "tooltipRenderer"
} 

gridOptions = {
  "autoGroupColumnDef": {
    "field": "agent",
    "headerName": "Agents",
    "cellRenderer": "agGroupCellRenderer",
    "cellRendererParams": {
      "innerRenderer": "agentCellRenderer"
    }
  },
  "groupUseEntireRow": false,
  "suppressContextMenu": true
}

frameworkComponents = {
    calendarMonthCell: CustomMonthCellComponent,
    groupRowInnerRenderer: CustmGroupRowComponent,
    tooltipRenderer: TooltipComponent
  };

But, I can't see the tooltip when hovering with the mouse on cells ... TooltipComponent is a ITooltipAngularComp (and do compile) and other custom renderers are working as intended ... I also tried without custom cell renderer. I used the tutorial here : https://www.ag-grid.com/javascript-grid-tooltip-component/

Here is something similare to what I do, and that is not working either ( I hope I have not forgotten any config doing this example ): https://stackblitz.com/edit/angular-tmsdw8

Anyone has an idea of my where my config is broken ?

Did you ever manage to solve this issue 'cus I am also struggling with it — Faris Kapo
No but I was able to create a working plunker. I ll have to go back to this in a few weeks and i ll post my results here. — sebius
sorry, too far away from this issue now, try the answer and if it works please tell me ! — sebius

Jyo Jyo · Accepted Answer · 2020-01-29T14:03:56

The tooltip popup styles are missing here. You just try adding the following style in the tooltip.component.ts


@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styles: [
      `
          :host {
              position: absolute;
              width: 150px;
              height: 70px;
              border: 1px solid cornflowerblue;
              overflow: hidden;
              pointer-events: none;
              transition: opacity 1s;
          }

          :host.ag-tooltip-hiding {
              opacity: 0;
          }

          .custom-tooltip p {
              margin: 5px;
              white-space: nowrap;
          }

          .custom-tooltip p:first-of-type {
              font-weight: bold;
          }
      `]
//  styleUrls: ['./tooltip.component.css']
})

Also try adding the tooltipField in the rowFields

rowFields = [
    {field: "agent", tooltipComponent: "tooltipRenderer", tooltipField:"agent"},
    {
      field: "toto",
       tooltipComponent: "tooltipRenderer"
    },
    {
      field: "titi",
       tooltipComponent: "tooltipRenderer"
    }];

Aggrid ITooltipAngularComp not showing

1 Answers