Question

我尝试使用ITooltipAngularComp在农业网格角（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"
    }];

Aggrid ITooltipAngularComp没有显示

1 个答案: