place tooltip is a specific column of grid

Question

Good morning, I would like to place a tooltip in a specific column of Grid; how can I do it ?I hope a quick response, thank you very much

Sujith Kumar Rajkumar · Answer

Hi Bryam, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement of displaying tooltip for Grid columns by rendering the Grid within the EJ2 Tooltip component. We have already logged this requirement in our documentation site and you can find the link for the same below, 
 
https://ej2.syncfusion.com/vue/documentation/grid/columns/columns/#display-custom-tooltip-for-columns 
 
The above documented approach shows tooltip for all the columns. However, the tooltip popup can be prevented from opening for certain columns by cancelling the tooltip open for the required cases. This can be achieved by setting the ‘cancel’ property value of the tooltip’s beforeOpen event arguments as ‘true’ as demonstrated in the below code snippet, 
 





// Tooltip’s beforeOpen event handler 
beforeOpen(args) { 
    // Current column index is retrieved 
    var cellIndex = parseInt(args.target.closest('.e-headercell').getAttribute('aria-colindex')); 
    // Column details are retrieved 
    var column = this.$refs.gridObj.ej2Instances.getColumnByIndex(cellIndex); 
    // Tooltip open is prevented based on column field 
    if (column.field == "EmployeeID" || column.field == "Country") { 
        // Here tooltip is prevented for the 'EmployeeID' and 'Country' columns 
        args.cancel = true; 
    } 
}  
 
API: https://ej2.syncfusion.com/vue/documentation/api/tooltip#beforeopen 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R