Tooltip을 제공할 필드 지정
let columnDefs = [
{
field:"make",
tooltipField: "make", // Tooltip 필드
// Tooltip 컴포넌트에 보낼 파라미터
tooltipComponentParams: { color: "#ececec" },
},
]브라우저 제공 Tooltip 사용 OR 커스텀
값이 true 면 alt 가 표시된다. 기본값은 false 임.
defaultColDef : {
enableBrowserTooltip : <boolean>,
// customTooltip 컴포넌트를 사용하겠다.
tooltipComponent: 'customTooltip',
},커스텀 Tooltip 은 어떻게?
components: {
customTooltip: CustomTooltip,
},Tooltip 표시 딜레이 시간
tooltipShowDelay : <number>커서 이동시 툴팁이 따라간다.
tooltipMouseTrack : <boolean>대충 전체 소스는 이럼
tooltip.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script defer src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="./customTooltip.js"></script>
</head>
<style>
.custom-tooltip {
position: absolute;
width: 150px;
height: 70px;
border: 1px solid cornflowerblue;
overflow: hidden;
pointer-events: none;
transition: opacity 1s;
}
.custom-tooltip.ag-tooltip-hiding {
opacity: 0;
}
.custom-tooltip p {
margin: 5px;
white-space: nowrap;
}
.custom-tooltip p:first-of-type {
font-weight: bold;
}
</style>
<script defer>
// 그리드...
let _gridDiv;
// 컬럼 정의
let _columnDefs = [
{
field:"make",
tooltipField: "make",
tooltipComponentParams: { color: "#ececec" },
},
{ field:"model", "sortable":true, "filter":true },
{ field:"price", "sortable":true, "filter":true }
]
// specify the data
let _rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
// 그리드 옵션
let _gridOptions = {
columnDefs : _columnDefs,
rowData : _rowData,
defaultColDef : {
/* enableBrowserTooltip:true */
tooltipComponent: 'customTooltip',
},
components: {
customTooltip: CustomTooltip,
},
tooltipShowDelay : 1000,
tooltipMouseTrack : true,
}
// 그리드 display
function setGrid() {
_gridDiv = $('#myGrid')[0];
new agGrid.Grid(_gridDiv, _gridOptions);
}
$(function() {
setGrid();
});
</script>
<body>
<div id="myGrid" style="height: 300px; width:700px;" class="ag-theme-alpine"></div>
</body>
</html>
customTooltip.js
class CustomTooltip {
init(params) {
const tooltipDiv = (this.tooltipDiv = document.createElement('div'));
const color = params.color || 'white';
const data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
tooltipDiv.classList.add('custom-tooltip');
tooltipDiv.style['background-color'] = color;
tooltipDiv.innerHTML = `
<p>
<span class"name">${data.make}</span>
</p>
<p>
<span>model: </span>
${data.model}
</p>
<p>
<span>price: </span>
${data.price}
</p>
`;
}
getGui() {
return this.tooltipDiv;
}
}Test
