CellTooltip

Displays a tooltip when hovering cells.

Cell tooltip

//<code-header>
fiddle.title = 'Cell tooltip';
//</code-header>
targetElement.innerHTML = '<p>Hover a cell to show the cell tooltip, note the Score loads async content</p>';

const grid = new Grid({
    appendTo : targetElement,

    // makes grid as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        // enable CellTooltip and configure a default renderer
        cellTooltip : {
            tooltipRenderer : ({ record, column }) => record[column.field],
            hoverDelay      : 200
        }
    },

    data : DataGenerator.generateData(5),

    columns : [
        // basic columns has a TextField as editor by default
        { field : 'name', text : 'Name', flex : 1 },
        // a custom editor can be specified
        {
            field  : 'city',
            text   : 'City',
            flex   : 1,
            editor : {
                type  : 'combo',
                items : ['Stockholm', 'New York', 'Montreal']
            }
        },
        // tooltipRenderer can return a Promise for async tooltip content
        {
            field           : 'score',
            text            : 'Score (Async tooltip)',
            flex            : 1,
            tooltipRenderer : ({ record }) => new Promise(resolve => {
                setTimeout(() => {
                    resolve(record.name + ': Some remote content');
                }, 2000);
            })
        },

        // Or use the async notation in the tooltipRenderer
        {
            type   : 'number',
            field  : 'age',
            text   : 'Age (readonly)',
            flex   : 1,
            editor : false//,
            // tooltipRenderer : async ({ record }) => {
            //     const result = await AjaxHelper.load('myPath');
            //
            //     return result.text();
            // }
        }
    ]
});

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())
      }
    }
  }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

tooltipRenderer: functionAlso a property

Function called to generate the HTML content for the cell tooltip. The function should return a string (your HTML), or a Promise yielding a string (for remotely loaded content)

Parameter	Type	Description
`context`	Object
`context.cellElement`	HTMLElement	The cell element
`context.record`	Model	The row record
`context.column`	Column	The column
`context.tip`	Tooltip	The Tooltip instance
`context.cellTooltip`	CellTooltip	The feature
`context.event`	Event	The raw DOM event

Returns: String | Promise | VueConfig

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isCellTooltip: Boolean= truereadonly

Identifies an object as an instance of CellTooltip class, or subclass thereof.

isCellTooltip: Boolean= truereadonlystatic

Identifies an object as an instance of CellTooltip class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

tip: Tooltipreadonly

Returns the tooltip instance

tooltipRenderer: functionAlso a config

Function called to generate the HTML content for the cell tooltip. The function should return a string (your HTML), or a Promise yielding a string (for remotely loaded content)

Parameter	Type	Description
`context`	Object
`context.cellElement`	HTMLElement	The cell element
`context.record`	Model	The row record
`context.column`	Column	The column
`context.tip`	Tooltip	The Tooltip instance
`context.cellTooltip`	CellTooltip	The feature
`context.event`	Event	The raw DOM event