# 셀 툴팁

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

Canonical: https://grid.syidax.com/ko/docs/features/tooltip/

<a id="understand"></a>

## 동작 원리와 선택 기준

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

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

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 별도 설명 필드 보여 주기

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

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

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

<a id="example-2"></a>

## 예제 2. 동적으로 설명 만들기

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

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

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

<a id="example-3"></a>

## 예제 3. 앱에서 툴팁 결과 확인

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

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

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

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

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

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

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [headerTooltip](https://grid.syidax.com/ko/docs/columns/headerTooltip.md) — 머리글에 제공할 보조 설명입니다.
- [tooltipField](https://grid.syidax.com/ko/docs/columns/tooltipField.md) — 툴팁에 사용할 원본 데이터 필드입니다.
- [tooltipValueGetter](https://grid.syidax.com/ko/docs/columns/tooltipValueGetter.md) — 현재 셀 문맥으로 툴팁 내용을 계산합니다. 권한 없는 값을 우회 노출하지 마세요.
- [getCellTooltipText](https://grid.syidax.com/ko/docs/methods/getCellTooltipText.md) — 대상 셀과 오버플로 문맥을 바탕으로 실제 툴팁 문자열을 계산합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/tooltip) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.