Ag-grid 自定义工具提示不适用于网格单元

Posted 2023-03-28

【中文标题】Ag-grid 自定义工具提示不适用于网格单元

【英文标题】：Ag-grid custom tooltip is not working for grid cells

【发布时间】：2020-12-02 17:18:09

【问题描述】：

我想在项目中使用 ag-grid 自定义工具提示。我根据 ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/ 的文档为工具提示制作了一个 js 组件，并将其分配给 this.gridOptions = config。自定义工具提示功能在列标题悬停时被调用，但它不在单元格悬停上且不显示工具提示。如果有人知道我在这里缺少什么，请指导我。

示例代码：

prepareConfig() 

        config.enableBrowserTooltips = false;
        config.defaultColDef= 
            sortable: true,
            tooltipComponent: 'customTooltip'
        ,
        
        function CustomTooltip() 
        CustomTooltip.prototype.init = function (params) 
            var eGui = (this.eGui = document.createElement('div'));
            let color = 'white';
            let data = params.rowIndex >= 0 ? params.api.getDisplayedRowAtIndex(params.rowIndex).data : params.value;

            eGui.style['background-color'] = color;
            if (data.subtitle) 
            eGui.classList.add('custom-tooltip');   
            eGui.innerhtml =
                '<div><div class="custom-tooltip-title">' + data.col1 + '</div><div  class="custom-tooltip-body">' +
                data.subtitle + '</div></div>';
              else 
                eGui.classList.add('ag-tooltip');
                eGui.innerHTML = '<div>' + data.col1 + '</div>';
             
        ;

        CustomTooltip.prototype.getGui = function () 
            return this.eGui;
        ;
        config.components = 
            customTooltip: CustomTooltip
        

        return config;
  

CSS

.custom-tooltip 
            position:absolute;
            box-shadow: 3px 3px 3px 0px #b9b9b9;
            border: 1px solid #c3c3c3;
            padding:5px;
            .custom-tooltip-title 
              font-weight:bold;
            
            .custom-tooltip-body 
              margin-top:5px;
            
        
        
        .ag-tooltip 
            font-size: 13px;
            box-shadow: 3px 3px 3px 0px #b9b9b9;
            border: 1px solid #c3c3c3;
            padding: 5px;
            background:white;
        

附上网格表截图供参考 grid table

【参考方案1】：

修复了 columnDefs 中缺少“tooltipField”的问题。

columnDefs = [ tooltipField: 'col1', ]