툴팁 시간과 풍부한 툴팁

툴팁이 뜨는 속도와 남는 시간을 정하고, 링크가 있는 요소를 넣고, 마우스를 올리면 유지되게 하며, 셀 메모를 툴팁 자리에서 봅니다.

빠르게 뜨고 링크를 누를 수 있는 툴팁.

이 데모의 코드

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

툴팁은 마우스가 셀이나 헤더에 머물면 나타납니다. 아래 옵션으로 시간을 바꾸고 글자보다 많은 내용을 넣습니다.

옵션

이름	타입	설명
`tooltipDelay`	`number`	툴팁이 뜨기까지 마우스가 머물러야 하는 시간(ms, 기본 500).
`tooltipHideDelay`	`number`	마우스가 떠난 뒤 툴팁이 남는 시간(ms, 기본 0, tooltipInteractive면 200).
`tooltipInteractive`	`boolean`	마우스가 툴팁 위에 있는 동안 유지되어 글자를 선택하고 링크를 누를 수 있습니다. 툴팁으로 가는 길에 다른 셀을 지나도 닫히지 않습니다.
`tooltip (column)`	`boolean \| (params) => string \| HTMLElement \| null`	true면 값을, 함수면 글자나 요소를 보여 줍니다.
`overflowTooltip`	`boolean`	…로 잘린 글자는 마우스를 올리면 전체를 보여 줍니다(기본 true).

링크가 있는 요소

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

어떤 툴팁이 나오나

셀 메모가 있으면 노란 메모 툴팁.
컬럼의 tooltip(함수, 또는 값을 보여 주는 true).
잘린 셀의 전체 글자(overflowTooltip).

헤더는 headerTooltip을 보여 줍니다. 클릭·입력·스크롤하면 툴팁이 사라집니다.