Tooltips

Introduction

A tooltip surfaces extra context on hover without spending grid space. ZenGrid gives you a declarative header tooltip on any column, an automatic overflow tooltip on chip cells, and — for body cells — a one-line renderer that sets the element’s native title.

Header tooltips

A column’s header accepts either a string or a full HeaderConfig. Switch to the object form and add a tooltip to get a hover hint on that header:

columns: [
  {
    field: 'revenue',
    header: {
      text: 'Revenue',
      tooltip: { content: 'Annual contract value in USD' },
    },
  },
]

The HeaderTooltip shape (from types/header.ts):

Field	Type	Purpose
content	string	The tooltip text. Required.
position	'top' | 'bottom' | 'left' | 'right'	Preferred placement.
delay	number	Show delay, in ms.

The current header renderer applies content through the element’s native title attribute, so it shows on hover exactly like a browser tooltip. position and delay are part of the config for forward compatibility but are not yet visually applied — native title placement and timing are browser-controlled.

Chip overflow tooltips

ChipRenderer already carries a tooltip. When showOverflowTooltip is on (default true), the cell gets a native title listing every chip’s label — handy when chips collapse or scroll and some are hidden:

import { ChipRenderer } from '@zengrid/core';

const status = new ChipRenderer({
  showOverflowTooltip: true, // default — set false to suppress
});

Body-cell tooltips

There is no declarative per-cell tooltip option today. A cell tooltip is a renderer that writes element.title — compose it over any existing renderer:

const withTip = {
  cacheable: false, // title lives on the element, not the cached HTML string
  render(el, p) {
    base.render(el, p);
    el.title = `${p.rowData?.[0]} — ${p.value}`;
  },
  update(el, p) {
    base.update(el, p);
    el.title = `${p.rowData?.[0]} — ${p.value}`;
  },
  destroy(el) {
    base.destroy(el);
    el.removeAttribute('title'); // cells are pooled — clear on the way out
  },
};

render params carry everything the title needs: value, cell ({ row, col }), rowData, column, and the cell’s selection/active/editing state (see RenderParams in renderer.interface.ts). Setting cacheable: false keeps the title correct, since the HTML-string cache captures inner markup, not attributes on the pooled cell element.

Live demo

The Region and Revenue headers carry declarative tooltips; each Revenue cell wraps the currency renderer to add its own hover title. Open Code or Split and try it: change a content string, add a tooltip to the Role header, or fold rowData into the cell title.

CodeDemoSplit

ResetRun ⌘⏎

Next

• Cell Components — the renderer API the cell tooltip builds on.
• Text Formatting — the renderers you compose a tooltip over.
• Notes — persistent per-cell annotations, distinct from hover tooltips.