Skip to main content

tooltipTemplate

Optional. A function which returns a template for the content of the tooltip

Usage​

tooltipTemplate?: (cellValue, row: IRow, column: ICol) => string;

Parameters​

The tooltipTemplate function takes 3 parameters:

  • cellValue - (required) the value of a cell
  • row - (required) an object with all cells in a row
  • column - (required) an object with the configuration of a column (see the columns config)

Returning false from the function will block showing of the tooltip.

Example​

const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            id: "country", header: [{ text: "Country" }], 
            htmlEnable: true, 
            tooltipTemplate: (cellValue, row, col) => `<div className="custom-tooltip">
                <img src="https://snippet.dhtmlx.com/codebase/data/common/img/02/${row.avatar}.jpg" />
                <span>Last edit time:<br/>${row.editing.toUTCString()}</span>
            </div>`
        },
        // more columns configuration objects
    ],
    // more options
});

Related article: Adding template to tooltip

Related sample: Grid. Rich tooltip template for the first column