@slickgrid-universal/custom-tooltip-plugin

Custom Tooltip (plugin)

@slickgrid-universal/custom-tooltip-plugin

A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell onMouseEnter and onMouseLeave events. The customTooltip is defined in the Column Definition OR Grid Options (the first found will have priority over the second) To specify a tooltip when hovering a cell, extend the column definition like so:

Available plugin options (same options are available in both column definition and/or grid options)

Register the plugin

In order to use the Service, you will need to register it in your grid options via the registerExternalResources as shown in the Example 2 below.

Example 1 - via Column Definition

this.columnDefinitions = [
  {
    id: "action", name: "Action", field: "action", formatter: fakeButtonFormatter,
    customTooltip: {
      formatter: tooltipTaskFormatter,
      // ...
    }
  }
];

OR Example 2 - via Grid Options (for all columns), NOTE: the column definition tooltip options will win over the options defined in the grid options

import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';

export class MyExample {
  initializeGrid {
    this.gridOptions = {
      customTooltip: {
        formatter: tooltipTaskFormatter,
        // ...
      },
      registerExternalResources: [new SlickCustomTooltip(), this.excelExportService],
    };
  }
}

Internal Dependencies

• @slickgrid-universal/common

External Dependencies

• DOM Purify to sanitize HTML text

Installation

Follow the instruction provided in the main README