Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/grid/api/gridcolumn_properties/gridcolumn_tooltiptemplate_property/ below:

Website Navigation

• Previous

  tooltip

• Next

  type

JavaScript Grid column - tooltipTemplate Config

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

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

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4