Merge pull request #1608 from zewa666/formatter-icon-tooltip

feat: support tooltips on icon formatters
ghiscoding · Jul 17, 2024 · bd52e00 · bd52e00
2 parents e34971d + 317affd
commit bd52e00
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/common/src/formatters/__tests__/iconFormatter.spec.ts b/packages/common/src/formatters/__tests__/iconFormatter.spec.ts
@@ -20,4 +20,12 @@ describe('the Icon Formatter', () => {
     const result = iconFormatter(0, 0, input, { field: 'user', params: { formatterIcon: icon } } as Column, {}, {} as any);
     expect((result as HTMLElement).outerHTML).toBe(`<i class="${icon}" aria-hidden="true"></i>`);
   });
+
+  it('should always return a <i> with the title attribute provided in the "title" property from "params"', () => {
+    const input = null;
+    const title = 'This is a title';
+    const icon = 'mdi mdi-magnify';
+    const result = iconFormatter(0, 0, input, { field: 'user', params: { icon, title } } as Column, {}, {} as any);
+    expect((result as HTMLElement).outerHTML).toBe(`<i class="${icon}" aria-hidden="true" title="${title}"></i>`);
+  });
 });
diff --git a/packages/common/src/formatters/iconFormatter.ts b/packages/common/src/formatters/iconFormatter.ts
@@ -9,5 +9,6 @@ export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => {
   if (!cssClasses) {
     throw new Error('[Slickgrid-Universal] When using `Formatters.icon`, you must provide the "iconCssClass" via the generic "params". (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "mdi mdi-magnify" }}`');
   }
-  return createDomElement('i', { className: cssClasses, ariaHidden: 'true' });
+  const title = columnParams.title || null
+  return createDomElement('i', { className: cssClasses, ariaHidden: 'true', title});
 };