toast grid header custom tooltip

토스트 그리드 헤더 커스텀 할 수 있는데
커스텀헤더 사용하면 sortable, filter 사용할 수 없음
그리고 헤더부분이 overflow hidden 되어있어서
헤더를 벗어나는 부분은 보이지 않는데
헤더에 툴팁 필요해서 만듬

커스텀 헤더 코드

class CustomColumnHeader {
  constructor(props) {
    const columnInfo = props.columnInfo;
    const el = document.createElement("div");
    el.className = "girdTooltipTh";
    this.el = el;
  }

  getElement() {
    return this.el;
  }

  render(props) {
    this.el.innerHTML = `${props.columnInfo.header}<span class="gridTooltip__icon"></span>`;
  }
}

툴팁이 필요한 헤더에 renderer 선언해줌

header: {
  height: 42,
  columns: [
    {
      name: "uncheck",
      renderer: CustomColumnHeader,
    },
    {
      name: "category1",
      renderer: CustomColumnHeader,
    },
    {
      name: "note",
      renderer: CustomColumnHeader,
    },
  ],
},

html

그리드에 선언해준 name이랑 data-tooltip 네이밍 맞춰줌

//그리드 
<div id="grid"></div>

//툴팁
<div class="gridTooltip">
  <div class="gridToolTip__cont" data-tooltip="uncheck">툴팁 내용이 들어갑니다 uncheck툴팁 내용이 들어갑니다 uncheck툴팁 내용이 들어갑니다</div>
  <div class="gridToolTip__cont" data-tooltip="category1">툴팁 내용이 들어갑니다 category1</div>
  <div class="gridToolTip__cont" data-tooltip="note">툴팁 내용이 들어갑니다 note</div>
</div>

js

//그리드 툴팁 위치 지정
const tooltipGirdPosition = (name) => {
  let tooltipTh = document.querySelector(`th[data-column-name='${name}']`);
  let tooltipThPosition = tooltipTh.offsetLeft; 
  let tooltipThWidth = tooltipTh.offsetWidth; //툴팁이 필요한 헤더 넓이 
  let tooltipThCalc = (tooltipThWidth - 240) / 2; // 240은 툴팁 넓이 
  let tooltipThTooltip = document.querySelector(`.gridToolTip__cont[data-tooltip='${name}']`); //html에 선언해준 툴팁내용 있는거 
  tooltipThTooltip.style.left = tooltipThPosition + tooltipThCalc + "px"; //헤더 가운데에 툴팁 뜨게 할라고 계산해줌 
};

//그리드 툴팁
const tooltipGrid = () => {
  //그리드가 로드 된 후 실행
  let gridId = document.querySelector("#grid");
  let gridWidth = gridId.querySelector(".tui-grid-rside-area .tui-grid-header-area .tui-grid-table").offsetWidth;
  let gridBody = gridId.querySelector(".tui-grid-rside-area .tui-grid-body-area");
  let gridTooltip = document.querySelector(".gridTooltip");

  //툴팁 박스 gird body에 붙임
  // 그리드가 가로로 스크롤될때 툴팁이 같이 따라다니려면 그안에 있어야되서 붙여줌 
  gridBody.append(gridTooltip);

  //툴팁 마우스
  //툴팁에 마우스 오버하면 오버한 툴팁이 보이게 해주고 마우스 떠나면 사라지게 ,, 
  
  let gridTh = document.querySelectorAll("th[data-column-name]");
  gridTh.forEach(function (th) {
    th.addEventListener("mouseenter", function (e) {
      let attr = e.target.dataset.columnName;
      console.log("attr" + attr);
      let tooltip = document.querySelector(`.gridToolTip__cont[data-tooltip="${attr}"]`);
      if (tooltip) {
        tooltip.classList.add("is-active");
      }
    });

    th.addEventListener("mouseleave", function (e) {
      let tooltipAll = document.querySelectorAll(".gridToolTip__cont[data-tooltip]");
      tooltipAll.forEach(function (item) {
        item.classList.remove("is-active");
      });
    });
  });
};
window.addEventListener("DOMContentLoaded", function () {
  //필요한 툴팁 실행
  tooltipGrid();
  tooltipGirdPosition("uncheck");
  tooltipGirdPosition("category1");
  tooltipGirdPosition("note");
});

결과

참고
https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/ko/custom-column-header.md