GRID FEATURE

셀 툴팁

툴팁은 잘린 이름이나 긴 설명을 잠시 확인하는 보조 수단입니다. 사용자가 반드시 알아야 하는 오류나 중요한 안내는 툴팁 안에만 숨기지 않습니다.

동작 원리와 선택 기준

표시되는 셀 값과 툴팁 내용은 다를 수 있습니다. 열의 tooltipField 또는 tooltipValueGetter를 사용하고, 읽기 권한과 실제 오버플로 여부를 고려합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

짧은 제품 이름과 긴 설명을 원본 데이터에 함께 둡니다.

javascript

grid.columnDefs = [{ field: 'product', headerName: '제품', tooltipField: 'description' }];

결과 확인: 제품 이름 위에서 해당 행의 description을 확인합니다. 설명 필드는 서버에서 함께 공급해야 합니다.

현재 셀 값에서 보조 문구를 계산합니다.

javascript

grid.columnDefs = [{
  field: 'quantity', headerName: '수량',
  tooltipValueGetter: params => '주문 수량: ' + String(params.value ?? 0),
}];

결과 확인: 행마다 다른 수량 설명이 표시됩니다. 통화·단위와 실제 데이터 타입을 일관되게 유지하세요.

첫 표시 행의 제품 셀에 대해 공개 API로 계산된 문구를 읽습니다.

javascript

console.log(await grid.getCellTooltipText({ rowIndex: 0, field: 'product' }));

결과 확인: 사용자가 읽을 수 없는 셀에서는 비밀 값을 툴팁으로 우회 노출하지 않아야 합니다. 실제 열 너비를 줄여 잘림 상황도 확인합니다.

hover만으로 중요한 기능에 접근하게 하지 마세요. 터치·키보드 사용자에게도 본문이나 상세 화면으로 같은 정보를 제공합니다.

툴팁 콜백에서 값 자체를 수정하지 마세요. 표시용 문자열을 반환하고 저장은 편집 API로 처리합니다.