그리드의 셀에 마우스가 오면 툴팁(Tooltip)을 표시합니다.(showTooltip = true 설정 : 기본값 false임)
"고객명" 과 "국가" 칼럼은 툴팁 내용을 사용자가 tooltipFunction 으로 설정한 모습니다.
// 그리드 칼럼 레이아웃 설정 const columnLayout = [{ dataField: "name", headerText: "고객명", headerStyle: "my-column", tooltip: { tooltipFunction: function (rowIndex, columnIndex, value, headerText, item, dataField) { let str = `툴팁 사용자 정의`; str += `
rowIndex : ${rowIndex}`; str += `
columnIndex : ${columnIndex}`; str += `
headerText : ${headerText}`; str += `
value : ${value}`; return str; } } }, { ...
마우스를 셀에 오버 시 300ms 지연 시간을 설정하여 300ms 안에 다른 셀로 이동하면 툴팁은 표시 되지 않습니다.
즉, 300ms 동안 같은 셀에 마우스가 있는 경우 출력함 (속성 tooltipSensitivity = 300 설정)
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.