Tooltip timing and rich tooltips

Set how fast tooltips appear and how long they stay, put elements with links in them, keep them open while hovered, and see cell notes in the tooltip place.

A fast, interactive tooltip with a link.

Code for this demo

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170, tooltip: p => {
        const box = document.createElement('div');
        const b = document.createElement('b');
        b.textContent = String(p.value);
        const a = document.createElement('a');
        a.href = `mailto:${p.row.email}`;
        a.textContent = String(p.row.email);
        a.style.color = 'inherit';
        box.append(b, document.createElement('br'), a);
        return box;
      } },
      { field: 'company', header: h('Company', '회사'), width: 150 },
      { field: 'email', header: h('Email', '이메일'), width: 140 },
    ],
    data: makeRows(300), locale: ctx.lang, tooltipDelay: 200, tooltipInteractive: true,
  });
  text(ctx, h('Hover a name: the tooltip shows in 0.2 s and stays while the pointer is on it, so the e-mail link can be clicked.',
    '이름에 마우스를 올리면 0.2초 만에 툴팁이 뜨고, 마우스를 올려 두면 유지되어 이메일 링크를 누를 수 있습니다.'));
  return grid;
}

Tooltips show after the pointer rests on a cell or header. These options change their timing and let them hold more than text.

Options

Name	Type	Description
`tooltipDelay`	`number`	Milliseconds the pointer must rest before a tooltip shows (default 500).
`tooltipHideDelay`	`number`	Milliseconds a tooltip stays after the pointer leaves (default 0, or 200 with tooltipInteractive).
`tooltipInteractive`	`boolean`	The tooltip stays while the pointer is on it: its text can be selected and its links clicked. Crossing other cells on the way to it does not close it.
`tooltip (column)`	`boolean \| (params) => string \| HTMLElement \| null`	true shows the value; a function returns text or an element.
`overflowTooltip`	`boolean`	Text cut off with … shows in full on hover (default true).

An element with a link

createGrid(el, {
  columns: [
    { field: 'sku', tooltip: p => {
      const box = document.createElement('div');
      const name = document.createElement('b');
      name.textContent = p.row.name;                // text, never HTML from data
      const link = document.createElement('a');
      link.href = '/items/' + encodeURIComponent(p.value);
      link.textContent = 'Open the item';
      box.append(name, document.createElement('br'), link);
      return box;
    } },
  ],
  data,
  tooltipDelay: 250,
  tooltipInteractive: true,
});

Which tooltip shows

A cell note, in a yellow note tooltip.
The column's tooltip (a function, or true for the value).
The full text of a cut-off cell (overflowTooltip).

Headers show headerTooltip. A tooltip hides when you click, type or scroll.