fix(core): don't show column header empty title tooltip (#1317)

* fix(core): don't show column header empty title tooltip
ghiscoding · Jan 9, 2024 · 8b20407 · 8b20407
1 parent a8ff224
commit 8b20407
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/common/src/core/__tests__/slickGrid.spec.ts b/packages/common/src/core/__tests__/slickGrid.spec.ts
@@ -778,7 +778,16 @@ describe('SlickGrid core file', () => {
       expect(cellNodeElm.outerHTML).toBe('<div class="slick-cell"><span>some content</span></div>');
     });
 
-    it('should be able to apply text, CSS classes and tooltip when Formatter is returnbing FormatterResultWithText', () => {
+    it('should be able to apply column header tooltip', () => {
+      const tooltipColumns = [{ id: 'firstName', field: 'firstName', name: 'First Name', toolTip: 'header tooltip' }] as Column[];
+
+      grid = new SlickGrid<any, Column>('#myGrid', dv, tooltipColumns, options);
+      const columnElms = container.querySelectorAll<HTMLDivElement>('.slick-header-columns .slick-header-column');
+
+      expect(columnElms[0].title).toBe('header tooltip');
+    });
+
+    it('should be able to apply cell text, CSS classes and tooltip when Formatter is returnbing FormatterResultWithText', () => {
       const formatterResult = { addClasses: 'some-class', toolTip: 'some tooltip', text: 'some content' } as FormatterResultWithText;
 
       grid = new SlickGrid<any, Column>('#myGrid', dv, columns, options);

diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
@@ -1580,7 +1580,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       const headerTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL;
       const headerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerRowL : this._headerRowR) : this._headerRowL;
 
-      const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, className: 'ui-state-default slick-state-default slick-header-column', title: m.toolTip || '' }, headerTarget);
+      const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget);
+      if (m.toolTip) {
+        header.title = m.toolTip;
+      }
       const colNameElm = createDomElement('span', { className: 'slick-column-name' }, header);
       this.applyHtmlCode(colNameElm, m.name as string);