CellTooltip

Feature

Displays a tooltip when hovering cells.

To show contents when hovering a cell, you can specify a global tooltipRenderer function for the feature, you can also define a tooltipRenderer for individual columns.

// Column with its own tooltip renderer
{
  text            : 'Name',
  field           : 'name',
  tooltipRenderer : ({ record }) => `My name is\xa0<b>${record.name}</b>`
}

Configuration properties passed into this feature are used to configure the Tooltip instance used.

This feature is disabled by default.

Showing async content

Showing remotely loaded content is super easy using the tooltipRenderer:

// Async tooltip with some custom settings
const grid = new Grid({
  features: {
    cellTooltip: {
      // Time that mouse needs to be over cell before tooltip is shown
      hoverDelay : 4000,
      // Time after mouse out to hide the tooltip, 0 = instantly
      hideDelay  : 0,
      // Async tooltip renderer, return a Promise which yields the text content
      tooltipRenderer({ record, tip }) {
        return fetch(`tip.php?id=${record.id}`).then(response => response.text())
      }
    }
  }
});

See also

• Grid - The grid component
• Tooltip - The tooltip widget used internally