feat: support html strings in title tooltip (#587)

* feat: support html strings in title tooltip

Author: arjunlalb

projects/components/src/table/header/table-header-cell-renderer.component.test.ts

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import { fakeAsync } from '@angular/core/testing';
 import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
 import { FilterParserLookupService } from '../../filtering/filter/parser/filter-parser-lookup.service';
@@ -116,4 +117,25 @@ describe('Table Header Cell Renderer', () => {
     expect(spectator.query('.sort-ascending', { root: true })).not.toExist();
     expect(spectator.query('.sort-descending', { root: true })).not.toExist();
   });
+
+  test('should create tooltip correctly', () => {
+    const columnConfig: TableColumnConfigExtended = {
+      id: 'test-column',
+      renderer: TextTableCellRendererComponent,
+      parser: new TableCellStringParser(undefined!),
+      filterValues: [],
+      titleTooltip: 'html:<div></div>',
+      sortable: false
+    };
+
+    const spectator = createHost(undefined, {
+      hostProps: {
+        columnConfig: columnConfig
+      }
+    });
+
+    expect(spectator.component.getTooltip('<div></div>', 'title') instanceof TemplateRef).toBe(true);
+    expect(spectator.component.getTooltip('titleTooltip', 'title') instanceof TemplateRef).toBe(true);
+    expect(spectator.component.getTooltip(undefined, 'title')).toBe('title');
+  });
 });

projects/components/src/table/header/table-header-cell-renderer.component.ts

@@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { TypedSimpleChanges } from '@hypertrace/common';
 import { InFilterModalComponent, InFilterModalData } from '../../filtering/filter-modal/in-filter-modal.component';
@@ -22,7 +32,7 @@ import { TableColumnConfigExtended } from '../table.service';
     <div
       *ngIf="this.columnConfig"
       [ngClass]="this.classes"
-      [htTooltip]="this.columnConfig.titleTooltip || this.columnConfig.title"
+      [htTooltip]="this.getTooltip(this.columnConfig.titleTooltip, this.columnConfig.title)"
       class="table-header-cell-renderer"
     >
       <ng-container *ngIf="this.leftAlignFilterButton">
@@ -64,6 +74,10 @@ import { TableColumnConfigExtended } from '../table.service';
             </div>
           </ht-popover-content>
         </ht-popover>
+
+        <ng-template #htmlTooltip>
+          <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
+        </ng-template>
       </ng-template>
     </div>
   `
@@ -102,6 +116,10 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
 
   public isFilterable: boolean = false;
 
+  @ViewChild('htmlTooltip')
+  public htmlTooltipTemplate?: TemplateRef<unknown>;
+  public sanitizedHtmlForTooltip?: string;
+
   public constructor(
     private readonly modalService: ModalService,
     private readonly filterParserLookupService: FilterParserLookupService
@@ -144,6 +162,17 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     this.sortChange.emit(direction ?? this.getNextSortDirection(this.sort));
   }
 
+  public getTooltip(
+    titleTooltip: string | undefined,
+    title: string | undefined
+  ): string | TemplateRef<unknown> | undefined {
+    if (titleTooltip === undefined) {
+      return title;
+    }
+
+    return this.htmlTooltipTemplate;
+  }
+
   private isAttributeFilterable(): boolean {
     return (
       this.metadata !== undefined &&