툴팁

셀 값이나 함수로 만든 툴팁, 헤더 툴팁, 옵션 없이도 보이는 잘린 글자의 전체 내용.

실행 예제툴팁

셀 값이나 함수로 만든 툴팁, 헤더 툴팁, 잘린 글자의 전체 내용.

이 데모의 코드

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

툴팁은 셀이나 헤더 위에 마우스를 올렸을 때 글을 보여 줍니다. 컬럼에 tooltip: true를 주면 셀 값을 그대로 보여 주므로 좁은 컬럼에 쓸모가 있습니다. 함수를 주면 행 데이터로 글을 만들 수 있어서, 예를 들어 주문이 보류된 이유를 보여 줄 수 있습니다. 아무것도 돌려주지 않으면 그 셀에는 툴팁이 없습니다. headerTooltip은 헤더에 컬럼 설명을 붙입니다.

글자가 잘린 셀은 옵션을 주지 않아도 마우스를 올리면 전체 글자가 보입니다. 그래서 좁은 화면에서도 긴 이름이나 이메일 주소를 읽을 수 있습니다. 이 동작은 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
});

표시 시간, 풍부한 내용, 머무는 툴팁

tooltipDelay, tooltipInteractive, 요소 툴팁으로 언제 뜨는지, 무엇을 담는지, 유지되는지를 정합니다. 자세한 내용:

툴팁 시간과 풍부한 툴팁

옵션

이름	타입	설명
`tooltipDelay / tooltipHideDelay / tooltipInteractive`	`number / number / boolean`	그리드: 툴팁이 뜨기 전(500)·떠난 뒤 시간(ms), 마우스를 올리면 유지.
`tooltip`	`boolean \| (params) => string \| HTMLElement \| null`	컬럼: true면 셀 값을, 함수면 돌려준 글을 보여 줍니다(아무것도 안 돌려주면 툴팁 없음). params에는 value, formatted, row, rowIndex, column이 있습니다.
`headerTooltip`	`string`	컬럼: 헤더에 마우스를 올렸을 때 보일 글.
`overflowTooltip`	`boolean (option)`	그리드: 잘린 셀은 마우스를 올리면 전체 글자가 보입니다(기본 true).