Question

使用ag-grid和ng7，我创建了一个自定义工具提示组件，并将其与headertooltip和headername绑定到列定义tooltipComponent。当我将鼠标悬停在标题上时，会调用来自agInit的next，但是不会呈现该模板

基于official ag-grid tooltip guide，有一种名为console.log的方法也可以呈现html。也尝试过，将鼠标悬停在标题上时没有显示任何内容。

getGui

    <ag-grid-angular
      #agGrid
      [frameworkComponents]="frameworkComponents"
      ...
    ></ag-grid-angular>

    headerName: 'Atheltes`
    tooltipComponent: 'customTooltip',
    headerTooltip: 'Helper text should show here'
    this.frameworkComponents = { customTooltip: CustomTooltipComponent };

我希望当我将鼠标悬停在标题@Component({ selector: 'ffp-tooltip-component', template: `<div>It should show helper text</div>`, }) export class CustomTooltipComponent implements ITooltipAngularComp { agInit(params: ITooltipParams) { console.log('this console log works!!') // console.log above gets called, however, no template is shown. } getGui(): any { } }上时，应该会看到工具提示文本Atheletes。

Answer 1

我在https://www.ag-grid.com/javascript-grid-tooltip-component尝试了ag-grid提供的Plunker示例，发现了一些可能有用的东西：

虽然我在文档中找不到它，但似乎列定义必须具有tooltipField条目，否则工具提示将不会显示。
在显示工具提示之前，可能会有3秒左右的明显延迟，因此，您需要将鼠标悬停在单元格上至少一秒以上才能看到工具提示。

Answer 2

我修改了ag-grid的工具提示属性，并且对我有用。

 .ag-tooltip {
      background-color: white !important;
      border-radius: 1px !important;
      padding: 5px !important;
      border-width: 1px !important;
      border-style: solid !important;
      border-color: #545454 !important;
}

Ag-grid自定义工具提示组件模板未显示

2 个答案: