Tooltips

Hover text from the cell value or your own function, header tooltips, and the full text of cut-off cells without any option.

Live demoTooltips

Hover text from the cell value or a function, header tooltips, and the full text of cut-off cells.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { makeRows } from '../data';
import { text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 160, tooltip: true },
      // your own text; null means no tooltip
      { field: 'status', header: h('Status', '상태'), width: 110,
        tooltip: ({ row }) => (row.status === 'Pending' ? h(`Customer since ${row.joined.getFullYear()}, waiting for approval`, `${row.joined.getFullYear()}년 가입, 승인 대기 중`) : null) },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110, headerTooltip: h('Revenue from January to March', '1월부터 3월까지 매출') },
      // narrow on purpose: the full address shows on hover
      { field: 'email', header: h('Email', '이메일'), width: 150 },
      { field: 'country', header: h('Country', '국가'), width: 140 },
    ],
    data: makeRows(300),
    locale: lang,
  });
  text(ctx, h('Hover a name, a Pending status, the Q1 header, or an e-mail address that is cut off.',
    '이름, 대기(Pending) 상태, 1분기 헤더, 잘린 이메일 주소 위에 마우스를 올려 보세요.'));
  return grid;
}

Tooltips show text when the pointer rests on a cell or a header. tooltip: true on a column shows the cell's value, which helps in narrow columns. A function returns your own text from the row, for example why an order is on hold; return nothing and that cell has no tooltip. headerTooltip explains a column in its header.

Cells whose text is cut off show their full text on hover anyway, without any option, so long names and e-mail addresses stay readable in a tight layout. Turn that off with overflowTooltip: false.

createGrid(el, {
  columns: [
    // the cell value as hover text
    { field: 'name', tooltip: true, headerTooltip: 'Customer name as registered' },
    // your own text; return nothing for no tooltip
    { field: 'status', tooltip: ({ row }) => (row.status === 'hold' ? `On hold: ${row.reason}` : null) },
    // cut-off text shows in full on hover without any option
    { field: 'memo', width: 160 },
  ],
  data,
  // overflowTooltip: false,   // turn off the full-text tooltip of cut-off cells
});

Timing, rich content and staying open

tooltipDelay, tooltipInteractive and element tooltips control when a tooltip shows, what it holds and whether it stays. See:

Tooltip timing and rich tooltips

Options

Name	Type	Description
`tooltipDelay / tooltipHideDelay / tooltipInteractive`	`number / number / boolean`	Grid: ms before a tooltip shows (500) and after the pointer leaves; keep it open while hovered.
`tooltip`	`boolean \| (params) => string \| HTMLElement \| null`	Column: true shows the cell value on hover; a function returns the text (nothing for no tooltip). params has value, formatted, row, rowIndex and column.
`headerTooltip`	`string`	Column: text shown when hovering the header.
`overflowTooltip`	`boolean (option)`	Grid: cut-off cells show their full text on hover (default true).