Is it possible to get the ag-grid tool tip html elements / values from the DOM?
I’m successfully using cypress to select (from the web page) the rows and cells html elements generated by ag-grid (we’re using ag-grid in an angular app / component). However, we have tool tips for many of our ag-grid column cells, and I can’t find a way to select them. I created a small ag-grid test, went into Chrome Browser DevTools and copied the generated html. I see ag-grid’s generated column headings, rows, columns, etc. but I don’t see the tool tip. I created a tool tip for the rowData field, ‘make’, using the rowData ‘price’ field (to be able to more easily search for the tooltip values in the generated html).
Following is menu.component.ts (angular component that uses ag-grid):
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import {
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ITooltipParams,
ModuleRegistry,
createGrid,
} from "ag-grid-community";
import { IVehicle } from './IVehicle';
@Component({
selector: 'app-menu',
standalone: true,
imports: [AgGridAngular],
templateUrl: './menu.component.html',
styleUrl: './menu.component.css'
})
export class MenuComponent {
columnDefs: ColDef[] = [
{ field: "make", tooltipField: "price" },
{ field: "model" }
];
rowData: IVehicle[] = [
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
];
gridOptions: GridOptions<IVehicle> = {
defaultColDef: {
flex: 1,
minWidth: 100,
},
rowData: null,
columnDefs: this.columnDefs,
tooltipShowDelay: 500,
};
ngOnInit(){
let gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
let gridApi: GridApi<IVehicle> = createGrid(gridDiv, this.gridOptions);
gridApi!.setGridOption("rowData", this.rowData);
}
}
menu-component.html:
<div id="myGrid" class="ag-theme-quartz" style="height: 500px">
</div>
IVehicle.ts:
export interface IVehicle {
make: string;
model: string;
price: number;
electric: boolean;
}
2