@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 externalResources 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,
        // ...
      },
      externalResources: [new SlickCustomTooltip(), this.excelExportService],
    };
  }
}

Internal Dependencies

• @slickgrid-universal/common

Installation

Follow the instruction provided in the main README

Changelog

5.12.1 (2025-01-25)

Bug Fixes

• add missing slick-filter class (a82535e) - by @ghiscoding
• core: using SlickGrid setOptions() was overriding object prop (#1821) (0c5210f) - by @ghiscoding
• Header Menu was offset when header/footer slots provided (#1812) (320db40) - by @ghiscoding
• inherit color for icon colors on Default Theme (a528da3) - by @ghiscoding
• resizer: add autoResize.autoHeight to resize by dataset length (#1820) (f278140) - by @ghiscoding
• RowSpan should work with Excel Export and merge cells (#1819) (8b0d4a3) - by @ghiscoding
• styling: slick filters should always be full width in flex (8f4c35d) - by @ghiscoding
• vue: prefer Ref<Column[]> to avoid template type mismatch (#1816) (0351a18) - by @ghiscoding
• vue: remove column definition defineModel type (#1815) (475baf7) - by @ghiscoding
• vue: show how to use Vue Component in a Formatter (#1817) (5533913) - by @ghiscoding