fix(tooltip): only create tooltip on header row/column from title attr

- the feature of that takes the cell content and displays a tooltip when the cell isn't showing the entire text should only be displayed on a slick-cell type, it shouldn't do this action when hovering on a slick header

packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts

@@ -268,7 +268,7 @@ describe('SlickCustomTooltip plugin', () => {
     expect(tooltipElm.classList.contains('arrow-right-align')).toBeFalsy();
   });
 
-  it('should create a tooltip with truncated text when tooltip option has "useRegularTooltip" enabled and the tooltipt text is longer than that of "tooltipTextMaxLength"', () => {
+  it('should create a tooltip with truncated text when tooltip option has "useRegularTooltip" enabled and the tooltip text is longer than that of "tooltipTextMaxLength"', () => {
     const cellNode = document.createElement('div');
     cellNode.className = 'slick-cell l2 r2';
     cellNode.setAttribute('title', 'some very extra long tooltip text sentence');
@@ -319,7 +319,7 @@ describe('SlickCustomTooltip plugin', () => {
     expect(hideColumnSpy).toHaveBeenCalled();
   });
 
-  it('should create a tooltip as regular tooltip with truncated text when tooltip option has "useRegularTooltip" enabled and the tooltipt text is longer than that of "tooltipTextMaxLength"', () => {
+  it('should create a tooltip as regular tooltip with truncated text when tooltip option has "useRegularTooltip" enabled and the tooltip text is longer than that of "tooltipTextMaxLength"', () => {
     const cellNode = document.createElement('div');
     cellNode.className = 'slick-cell l2 r2';
     cellNode.textContent = 'some very extra long tooltip text sentence';
@@ -330,7 +330,6 @@ describe('SlickCustomTooltip plugin', () => {
     jest.spyOn(gridStub, 'getCellNode').mockReturnValue(cellNode);
     jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
     jest.spyOn(dataviewStub, 'getItem').mockReturnValue({ firstName: 'John', lastName: 'Doe' });
-    const hideColumnSpy = jest.spyOn(plugin, 'hideTooltip');
 
     plugin.init(gridStub, container);
     plugin.setOptions({ useRegularTooltip: true, tooltipTextMaxLength: 23 });
@@ -343,6 +342,26 @@ describe('SlickCustomTooltip plugin', () => {
     expect(tooltipElm.classList.contains('arrow-left-align')).toBeTruthy();
   });
 
+  it('should NOT create a tooltip as regular tooltip with truncated text when tooltip option has "useRegularTooltip" enabled but the mouse over is not a slick-cell cell type', () => {
+    const cellNode = document.createElement('div');
+    cellNode.className = 'slick-cell l2 r2';
+    cellNode.textContent = 'some very extra long tooltip text sentence';
+    cellNode.setAttribute('title', 'tooltip text');
+    Object.defineProperty(cellNode, 'scrollWidth', { writable: true, configurable: true, value: 400 });
+    const mockColumns = [{ id: 'firstName', field: 'firstName' }] as Column[];
+    jest.spyOn(gridStub, 'getCellFromEvent').mockReturnValue({ cell: 0, row: 1 });
+    jest.spyOn(gridStub, 'getCellNode').mockReturnValue(cellNode);
+    jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+    jest.spyOn(dataviewStub, 'getItem').mockReturnValue({ firstName: 'John', lastName: 'Doe' });
+
+    plugin.init(gridStub, container);
+    plugin.setOptions({ useRegularTooltip: true, tooltipTextMaxLength: 23 });
+    gridStub.onHeaderMouseEnter.notify({ column: mockColumns[0], grid: gridStub }, { ...new Slick.EventData(), target: cellNode });
+
+    const tooltipElm = document.body.querySelector('.slick-custom-tooltip') as HTMLDivElement;
+    expect(tooltipElm).toBeFalsy();
+  });
+
   it('should create a tooltip with only the tooltip formatter output when tooltip option has "useRegularTooltip" & "useRegularTooltipFromFormatterOnly" enabled and column definition has a regular formatter with a "title" attribute filled', () => {
     const cellNode = document.createElement('div');
     cellNode.className = 'slick-cell l2 r2';

packages/custom-tooltip-plugin/src/slickCustomTooltip.ts

@@ -26,6 +26,8 @@ import {
 // using external SlickGrid JS libraries
 declare const Slick: SlickNamespace;
 
+type CellType = 'slick-cell' | 'slick-header-column' | 'slick-headerrow-column';
+
 /**
  * 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)
@@ -54,6 +56,7 @@ export class SlickCustomTooltip {
   protected _addonOptions?: CustomTooltipOption;
   protected _cellAddonOptions?: CustomTooltipOption;
   protected _cellNodeElm?: HTMLDivElement;
+  protected _cellType: CellType = 'slick-cell';
   protected _cancellablePromise?: CancellablePromiseWrapper;
   protected _observable$?: Subscription;
   protected _rxjs?: RxJsFacade | null = null;
@@ -175,7 +178,9 @@ export class SlickCustomTooltip {
   }
 
   /** depending on the selector type, execute the necessary handler code */
-  protected handleOnHeaderMouseEnterByType(event: SlickEventData, args: any, selector: string) {
+  protected handleOnHeaderMouseEnterByType(event: SlickEventData, args: any, selector: CellType) {
+    this._cellType = selector;
+
     // before doing anything, let's remove any previous tooltip before
     // and cancel any opened Promise/Observable when using async
     this.hideTooltip();
@@ -215,6 +220,8 @@ export class SlickCustomTooltip {
   }
 
   protected async handleOnMouseEnter(event: SlickEventData) {
+    this._cellType = 'slick-cell';
+
     // before doing anything, let's remove any previous tooltip before
     // and cancel any opened Promise/Observable when using async
     this.hideTooltip();
@@ -313,7 +320,7 @@ export class SlickCustomTooltip {
     let tmpTitleElm: HTMLDivElement | null | undefined;
 
     if (!tooltipText) {
-      if (this._cellNodeElm && (this._cellNodeElm.clientWidth < this._cellNodeElm.scrollWidth) && !this._cellAddonOptions?.useRegularTooltipFromFormatterOnly) {
+      if (this._cellType === 'slick-cell' && this._cellNodeElm && (this._cellNodeElm.clientWidth < this._cellNodeElm.scrollWidth) && !this._cellAddonOptions?.useRegularTooltipFromFormatterOnly) {
         tooltipText = this._cellNodeElm.textContent?.trim() ?? '';
         if (this._cellAddonOptions?.tooltipTextMaxLength && tooltipText.length > this._cellAddonOptions?.tooltipTextMaxLength) {
           tooltipText = tooltipText.substring(0, this._cellAddonOptions.tooltipTextMaxLength - 3) + '...';