Custom Tooltip (plugin)

index

• Column Definition - Custom Tooltip
• Grid Options - Custom Tooltip
• Tooltip Type
  • on Cell with formatter
  • on Column Header (title) with headerFormatter
  • on Column Header row (filter) with headerRowFormatter
  • with regular [title] attribute
• customTooltip options
  • delay opening of a tooltip
• UI Sample

Description

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) To specify a tooltip when hovering a cell

NOTE: this is an opt-in plugin, you must import the necessary plugin from @slickgrid-universal/custom-tooltip-plugin and instantiate it in your grid options via registerExternalResources, see multiple examples below.

Demo

Demo Page / Demo Component

via Column Definition

You can set or change option of an individual column definition custom tooltip.

import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';

initializeGrid() {
  this.columnDefinitions = [{
      id: "title", name: "Title", field: "title", formatter: titleFormatter,
      customTooltip: {
        formatter: tooltipTaskFormatter,
        // ...
      }
  }];

  // make sure to register the plugin in your grid options
  this.gridOptions = {
    registerExternalResources: [new SlickCustomTooltip()],
  };
}

via Grid Options

You can set certain options for the entire grid, for example if you set exportWithFormatter it will evaluate the Formatter (when exist) output to export each cell. The Grid Menu also has the "Export to Excel" enabled by default.

import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';

initializeGrid() {
  this.gridOptions = {
    registerExternalResources: [new SlickCustomTooltip()],
    customTooltip: {
      formatter: tooltipTaskFormatter,
      // ...
    },
  };
}

Tooltip Types

Cell Custom Tooltip with formatter

You can create a Custom Tooltip which will show up when hovering a cell by simply providing a formatter via a Column Definition (per column) OR via Grid Options (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.

// define your custom tooltip in a Column Definition OR Grid Options
customTooltip: {
  formatter: this.tooltipFormatter,
},

here's a simple formatter (you can see the result in the UI Sample gif below)

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="header-tooltip-title">${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>${dataContext.percentComplete}</div></div>`;
}

Column Header Custom Tooltip with headerFormatter

You can create a Custom Tooltip which will show up when hovering a column header (title) by simply providing a headerFormatter via a Column Definition (per column) OR via Grid Options (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.

// define your custom tooltip in a Column Definition OR Grid Options
customTooltip: {
  headerFormatter: this.headerFormatter,
},

here's a simple formatter

headerFormatter(row, cell, value, column) {
    const tooltipTitle = 'Custom Tooltip - Header';
    return `<div class="header-tooltip-title">${tooltipTitle}</div>
    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.name}</div></div>`;
}

Column Header Custom Tooltip with headerRowFormatter

You can create a Custom Tooltip which will show up when hovering a column header (title) by simply providing a headerRowFormatter via a Column Definition (per column) OR via Grid Options (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.

// define your custom tooltip in a Column Definition OR Grid Options
customTooltip: {
  headerRowFormatter: this.headerRowFormatter,
},

here's a simple formatter

headerRowFormatter(row, cell, value, column) {
    const tooltipTitle = 'Custom Tooltip - Header Row (filter)';
    return `<div class="headerrow-tooltip-title">${tooltipTitle}</div>
    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.field}</div></div>`;
  }

UI Sample

The Export to Excel handles all characters quite well, from Latin, to Unicode and even Unicorn emoji, it all works on all browsers (Chrome, Firefox, even IE11, I don't have access to older versions). Here's a demo