Custom Tooltip (plugin)

index

• Column Definition - Custom Tooltip
• Grid Options - Custom Tooltip
• Tooltip Type
  • on Cell with formatter
  • on Cell Async Tooltip (Async API call from Promise/Observable)
  • on Column Header (title) with headerFormatter
  • on Column Header row (filter) with headerRowFormatter
  • with regular [title] attribute
• How to delay a tooltip opening?
• customTooltip options
  • too many to list, consult the CustomTooltipOption interface for all possible options
• 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>`;
}

Cell Async Custom Tooltip with formatter and asyncPostFormatter (Async API call)

You can create an Async Custom Tooltip which is a delayed tooltip (for example when you call an API to fetch some info), will show up when hovering a cell it will require a bit more setup. The formatter will be use to show any form of "loading..." and your final tooltip will be shown via the asyncPostFormatter both formatters use the same structure as a regular formatter and accepts html string. It will also require you to provide an asyncProcess of your API call (it could be a Promise or Observable), it also provides the same arguments as a regular formatter.

// define your custom tooltip in a Column Definition OR Grid Options
customTooltip: {
  // 1- loading formatter
  formatter: () => `loading...</div>`,

  // 2- post process formatter
  asyncProcess: (row, cell, value, column, dataContext) => fetch(`/user/${dataContext.id}`), // could be a Promise/Observable
  asyncPostFormatter: this.userFullDetailAsyncFormatter,
},

here's the final post process async formatter

userFullDetailAsyncFormatter(row, cell, value, column, dataContext, grid) {
    const tooltipTitle = 'User Detail - Async Tooltip';
    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>First Name:</div> <div>${dataContext.firstName}</div></div>
    <div class="tooltip-2cols-row"><div>Last Name:</div> <div>${dataContext.lastName}</div></div>
    <div class="tooltip-2cols-row"><div>Age:</div> <div>${dataContext.age}</div></div>
    <div class="tooltip-2cols-row"><div>Gender:</div> <div>${dataContext.gender}</div></div>
    <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
    <div class="tooltip-2cols-row"><div>Seniority:</div> <div>${dataContext.seniority}</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>`;
  }

Regular Tooltip with a [title] attribute

You can create a regular tooltip simply by enabling useRegularTooltip: true, it will parse the regular cell formatter in search for a title="..." attribute (it won't work without a cell formatter, unless the cell text content is larger than the cell width when ellipsis shows up "some text..." and that will automatically create a tooltip, that could however be disabled if you wish).

This feature is very useful so you probably want to enable this flag globally, but you could also still choose to add only via a Column Definition (per column) OR via Grid Options (all columns of the grid).

NOTE: regular tooltip, as opposed to other type of custom tooltip, will be rendered as plain text. You could however change that by enabling this flag renderRegularTooltipAsHtml: true

// define your custom tooltip in a Column Definition OR Grid Options
customTooltip: {
  useRegularTooltip: true, // a regular tooltip will search for a "title" attribute in the cell formatter (it won't work without a cell formatter)

  // if you wish to disable auto-tooltip creation when ellipsis (...) shows up, can use this flag
  // useRegularTooltipFromFormatterOnly: true,
},

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

auto tooltip on large text, that is when ellipsis (...) shows up on large text

Async Custom Tooltip (API call Promise/Observable)