refactor: add more options to Custom & Regular Tooltip

examples/webpack-demo-vanilla-bundle/src/examples/example03.ts

@@ -20,7 +20,6 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
-import '../salesforce-styles.scss';
 import './example03.scss';
 
 // using external SlickGrid JS libraries
@@ -134,7 +133,7 @@ export class Example3 {
         }
       },
       {
-        id: 'cost', name: 'Cost', field: 'cost',
+        id: 'cost', name: '<span title="custom cost title tooltip text">Cost</span>', field: 'cost',
         width: 90,
         sortable: true,
         filterable: true,
@@ -145,6 +144,7 @@ export class Example3 {
         params: { formatters: [Formatters.dollar, (row, cell, value) => `<span title="regular tooltip (from title attribute) - cell value: ${value || ''}">${value || ''}</span>`] },
         customTooltip: {
           useRegularTooltip: true,
+          // renderRegularTooltipAsHtml: true,
           // maxWidth: 200,
           // maxHeight: 40,
         },
@@ -315,11 +315,13 @@ export class Example3 {
       excelExportOptions: {
         exportWithFormatter: true
       },
+      enableAutoTooltip: true,
       // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins)
       enableCustomTooltip: true,
       customTooltip: {
         formatter: this.tooltipFormatter.bind(this),
-        usabilityOverride: (args) => (args.cell !== 0 && args.column.id !== 'action'), // don't show on first/last columns
+        headerFormatter: this.headerFormatter.bind(this),
+        usabilityOverride: (args) => (args.cell !== 0 && args?.column?.id !== 'action'), // don't show on first/last columns
         // hideArrow: true, // defaults to False
       },
       registerExternalResources: [this.excelExportService],
@@ -556,11 +558,20 @@ export class Example3 {
     }
   }
 
-  tooltipFormatter(row, cell, value, column, dataContext) {
+  headerFormatter(row, cell, value, column) {
+    const tooltipTitle = 'Custom Tooltip - Header';
+    return `<div class="header-tooltip-title" style="font-weight: bold">${tooltipTitle}</div>
+    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.name}</div></div>`;
+  }
+
+  tooltipFormatter(row, cell, value, column, dataContext, grid) {
     const tooltipTitle = 'Custom Tooltip';
+    const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid);
+
     return `<div class="color-sf-primary-dark" style="font-weight: bold">${tooltipTitle}</div>
     <div class="tooltip-2cols-row"><div>Id:</div> <div>${dataContext.id}</div></div>
     <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
+    <div class="tooltip-2cols-row"><div>Effort Driven:</div> <div>${effortDrivenHtml}</div></div>
     <div class="tooltip-2cols-row"><div>Completion:</div> <div>${this.loadCompletionIcons(dataContext.percentComplete)}</div></div>
     `;
   }

packages/common/src/global-grid-options.ts

@@ -92,6 +92,10 @@ export const GlobalGridOptions: GridOption = {
       itemsSelectedKey: 'ITEMS_SELECTED'
     }
   },
+  enableCustomTooltip: false,
+  customTooltip: {
+    tooltipTextMaxLength: 700
+  },
   dataView: {
     syncGridSelection: true, // when enabled, this will preserve the row selection even after filtering/sorting/grouping
     syncGridSelectionWithBackendService: false, // but disable it when using backend services

packages/common/src/interfaces/customTooltipOption.interface.ts

@@ -24,6 +24,9 @@ export interface CustomTooltipOption<T = any> {
   /** Formatter to execute once the async process is completed, to displayed the actual text result (used when dealing with an Async API to get data to display later in the tooltip) */
   asyncPostFormatter?: Formatter;
 
+  /** Formatter to execute when custom tooltip is over a header column */
+  headerFormatter?: Formatter;
+
   /** defaults to False, should we hide the tooltip pointer arrow? */
   hideArrow?: boolean;
 
@@ -37,10 +40,20 @@ export interface CustomTooltipOption<T = any> {
    */
   formatter?: Formatter;
 
-  /** optional maximum height number (in pixel) of the tooltip container */
+  /**
+   * optional maximum height number (in pixel) of the tooltip container
+   * NOTE: the default CSS will NOT automatically show the ellipsis when the text is too long because when setting `overflow: hidden`
+   * it makes the arrow disappear because the arrow is added via the `::after` pseudo and we could not find how to keep the arrow when ellipsis is enabled.
+   * If you are ok to use the ellipsis without the tooltip arrow, then you can change these 3 CSS variables (or SASS) `--slick-tooltip-overflow: hidden`, `--slick-tooltip-white-space: nowrap` and `--slick-tooltip-text-overflow: ellipsis`
+   */
   maxHeight?: number;
 
-  /** optional maximum width number (in pixel) of the tooltip container */
+  /**
+   * optional maximum width number (in pixel) of the tooltip container
+   * NOTE: the default CSS will NOT automatically show the ellipsis when the text is too long because when setting `overflow: hidden`
+   * it makes the arrow disappear because the arrow is added via the `::after` pseudo and we could not find how to keep the arrow when ellipsis is enabled.
+   * If you are ok to use the ellipsis without the tooltip arrow, then you can change these 3 CSS variables (or SASS) `--slick-tooltip-overflow: hidden`, `--slick-tooltip-white-space: nowrap` and `--slick-tooltip-text-overflow: ellipsis`
+   */
   maxWidth?: number;
 
   /** defaults to 0, optional left offset, it must be a positive/negative number (in pixel) that will be added to the offset position calculation of the tooltip container. */
@@ -55,14 +68,23 @@ export interface CustomTooltipOption<T = any> {
   /**
    * Defaults to "auto", allows to align the tooltip to the best logical position in the window, by default it will show on top but if it calculates that it doesn't have enough space it will revert to bottom.
    * We can assume that in 80% of the time the default position is top left, the default is "auto" but we can also override this and use a specific align side.
-   * Most of the time positioning of the tooltip will be to the "right" of the cell is ok but if our column is completely on the right side then we'll want to change the position to "left" align.
+   * Most of the time positioning of the tooltip will be to the "right-align" of the cell is ok but if our column is completely on the right side then we'll want to change the position to "left-align" align.
    * Same goes for the top/bottom position, Most of the time positioning the tooltip to the "top" but if we are showing a tooltip from a cell on the top of the grid then we might need to reposition to "bottom" instead.
    */
-  position?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
+  position?: 'auto' | 'top' | 'bottom' | 'left-align' | 'right-align';
 
   /** defaults to False, when set to True it will skip custom tooltip formatter and instead will parse through the regular cell formatter and try to find a `title` to show regular tooltip */
   useRegularTooltip?: boolean;
 
+  /** defaults to false, regular "title" tooltip won't be rendered as html unless specified via this flag (also "\r\n" will be replaced by <br>) */
+  renderRegularTooltipAsHtml?: boolean;
+
+  /** defaults to 700 (characters), when defined the text will be truncated to the max length characters provided */
+  tooltipTextMaxLength?: number;
+
+  /** defaults to undefined, when provided it will delay the tooltip open */
+  tooltipDelay?: number;
+
   // --
   // callback functions
   // -------------------

packages/common/src/styles/_variables.scss

@@ -907,6 +907,7 @@ $slick-tooltip-background-color:                      #ffffff !default;
 $slick-tooltip-border-color:                          #BFBDBD !default;
 $slick-tooltip-border:                                2px solid #{$slick-tooltip-border-color} !default;
 $slick-tooltip-border-radius:                         4px !default;
+$slick-tooltip-font-size:                             calc(#{$font-size-base} - 1px) !default;
 $slick-tooltip-color:                                 inherit !default;
 $slick-tooltip-height:                                auto !default;
 $slick-tooltip-padding:                               7px !default;
@@ -922,7 +923,7 @@ $slick-tooltip-arrow-top:                             -7px !default;
 $slick-tooltip-down-arrow-border-top:                 7px solid #{$slick-tooltip-border-color} !default;
 $slick-tooltip-top-arrow-border-bottom:               7px solid #{$slick-tooltip-border-color} !default;
 $slick-tooltip-left-arrow-margin-left:                -10% !default;
-$slick-tooltip-right-arrow-margin-left:               80% !default;
+$slick-tooltip-right-arrow-margin-left:               70% !default;
 
 /** Empty Data Warning element */
 $empty-data-warning-color:                            $cell-text-color !default;

packages/common/src/styles/slick-plugins.scss

@@ -278,6 +278,7 @@
   border-radius: var(--slick-tooltip-border-radius, $slick-tooltip-border-radius);
   color: var(--slick-tooltip-color, $slick-tooltip-color);
   padding: var(--slick-tooltip-padding, $slick-tooltip-padding);
+  font-size: var(--slick-tooltip-font-size, $slick-tooltip-font-size);
   height: var(--slick-tooltip-height, $slick-tooltip-height);
   width: var(--slick-tooltip-width, $slick-tooltip-width);
   z-index: var(--slick-tooltip-z-index, $slick-tooltip-z-index);

packages/vanilla-bundle/src/salesforce-global-grid-options.ts

@@ -30,6 +30,10 @@ export const SalesforceGlobalGridOptions = {
   },
   enableCellNavigation: true,
   enableCustomTooltip: true,
+  customTooltip: {
+    tooltipTextMaxLength: 700,
+    tooltipDelay: 0,
+  },
   filterTypingDebounce: 250,
   formatterOptions: {
     minDecimal: 0,