Question

我想在项目中使用ag-grid自定义工具提示。根据ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/的文档，我为工具提示制作了一个js组件，并将其分配给const [state, dispatch] = React.useReducer(reducer, initialCount, init);。自定义工具提示功能在列标题的悬停时被调用，但不在单元格悬停时不显示工具提示。如果有人知道，我在这里缺少什么，请引导我。

示例代码：

this.gridOptions = config

CSS

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

附加网格表的屏幕快照以供参考 grid table

Answer 1

已修复，columnDefs中缺少“ tooltipField”。

columnDefs = [ { tooltipField：'col1'， }]

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

1 个答案: