Skip to content

Custom Tooltip (plugin)

Jump to bottom
Ghislain B edited this page Oct 27, 2021 · 40 revisions

index

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>`;
  }

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

image

when cell text content is larger than the cell width (when we start to see ellipsis "some text..."), the tooltip will automatically be created as shown below image

Clone this wiki locally