[英]Ag-grid custom tooltip is not working for grid cells
I want to use an ag-grid custom tooltip in a project.我想在项目中使用 ag-grid 自定义工具提示。 I have made a js component for tooltip as per the documentation of ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/ and assign it to
this.gridOptions = config
.我根据 ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/的文档为工具提示制作了一个 js 组件,并将其分配给
this.gridOptions = config
。 The custom tooltip function is getting called on hover of column Header but, it's not on cell hover and not showing tooltip.自定义工具提示 function 在 Header 列的 hover 上被调用,但是,它不在单元格 ZE0542F579FADE6F7E7Z 上显示工具提示和不显示If anyone knows, what I am missing here, please guide me.
如果有人知道,我在这里缺少什么,请指导我。
Sample code:示例代码:
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 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;
}
Attaching a screenshot of grid table for reference grid table附上网格表截图供参考网格表
fixed,"tooltipField" was missing in columnDefs.修复了 columnDefs 中缺少“tooltipField”的问题。
columnDefs = [ { tooltipField: 'col1', }] columnDefs = [ { tooltipField: 'col1', }]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.