How to render tooltip with custom content on Grid columns

The EJ2 Tooltip with custom text can be rendered for the DataGrid header and content by following the steps below.

Initially, the EJ2 Tooltip component is appended on the div element inside which the DataGrid target element is defined. The target property for the tooltip is set as ‘.e-headercell,.e-rowcell’(These classes are added to the Grid’s header and content cell elements, respectively. So, the tooltip will be displayed when we hover on both of them).

var tooltipObj = new ej.popups.Tooltip({
     target: '.e-headercell,.e-rowcell',
});
tooltipObj.appendTo('#tooltipTarget');

The ‘mouseover’ event is bound to the Grid element where the required custom text is set as Tooltip’s content using its content property.

grid.element.addEventListener('mouseover', function (args) {
     tooltipObj.content = args.target.innerText;
})

Output

You can find the samples here:

JavaScript sample

Angular sample