Ag Grid Tooltip Angular Comp 未显示

Question

我尝试使用 ITooltipAngularComp 在 ag grid angular (v 20.1.0) 上显示自定义 toolitp。

这里是 ag-grid 调用：

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

与：

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

但是，将鼠标悬停在单元格上时，我看不到工具提示... TooltipComponent 是一个 ITooltipAngularComp （并进行编译），其他自定义渲染器正在按预期工作......我也尝试过没有自定义单元格渲染器。 我在这里使用了教程： https://www.ag-grid.com/javascript-grid-tooltip-component/

这是与我所做的类似的事情，但这也不起作用（我希望我没有忘记执行此示例的任何配置）： https://stackblitz.com/edit/angular-tmsdw8

有人知道我的配置在哪里损坏了吗？

Answer 1

此处缺少工具提示弹出样式。 您只需尝试在 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']
})

还可以尝试在 rowFields 中添加 tooltipField

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