如何在 Angular slickgrid 中使用格式化程序创建自定义工具提示而不创建角度组件？

Question

上下文

当悬停在行数据上时，我想显示带有自定义数据的工具提示，我不想使用 Angular 组件或引导工具提示，而是使用简单的 html 和 css，以便我可以将它与 Angular Slick 一起使用-网格格式化程序

我尝试过使用 html 和 css，结果如图所示，工具提示不完全可见，隐藏在表格中

谁能帮我解决这个问题？

环境 Angular - 8.2.14，Angular-Slickgrid - 2.22.4，TypeScript - 3.7

Answer 1

由于 CSS 样式是如何在 SlickGrid 中完成的，您需要找到一个库，该库可以选择在“body”容器上呈现工具提示，而不仅仅是在单元格容器上（这是您尝试过的）。如果您使用 Bootstrap Tooltip，那将是他们在其网站上写的这一行

指定container: 'body' 以避免在更复杂的组件（如我们的输入组、按钮组等）中出现渲染问题。

请参阅引导工具提示 Options，特别是 container 选项

编辑 2（2021-10-29）

使用下面显示的代码，我为 Angular-Slickgrid 和 SlickGrid 创建了一个新插件。您可以看到 Angular-Slickgrid 版本3.3.0 及更高版本的新插件的实时Example 32 - Custom Tooltip。它适用于很多用例，使用 [title] 属性或通过提供自定义工具提示格式化程序，它还具有用于处理 API 异步调用（Promise/Observable）的异步选项。

编辑 1

我又玩了这个，因为我还想添加基本的工具提示支持（可能没有任何工具提示库），下面是一个使用 SlickGrid onMouseEnter 和 onMouseLeave 事件的非常基本且实用的工具提示。这个答案使用了一些来自较旧的 SO Answer

<angular-slickgrid gridId="grid22"
                       [columnDefinitions]="columnDefinitions"
                       [gridOptions]="gridOptions"
                       [dataset]="dataset"
                       (onMouseEnter)="handleOnMouseEnter($event.detail.eventData)"
                       (onMouseLeave)="handleOnMouseLeave($event.detail.eventData)"
                       (onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>

import { getHtmlElementOffset } from 'angular-slickgrid';

export class MyComponent {
  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  handleOnMouseEnter(e) {
    if (this.angularGrid.slickGrid && e) {
      const cell = this.angularGrid.slickGrid.getCellFromEvent(e);
      if (cell) {
        const item = this.angularGrid.dataView.getItem(cell.row);
        const columnDef = this.sgb.slickGrid.getColumns()[cell.cell];
        const cellPosition = getHtmlElementOffset(this.angularGrid.slickGrid.getCellNode(cell.row, cell.cell));
        const tooltipElm = document.createElement('div');
        tooltipElm.className = 'some-tooltip'; // you could also add cell/row into the class name
        tooltipElm.innerHTML = `<div><label>Id:</label> ${item.id}</div><div><label>Title:</label> ${item.title}</div>`;
        document.body.appendChild(tooltipElm);
        tooltipElm.style.top = `${cellPosition.top - tooltipElm.clientHeight - 3}px`;
        tooltipElm.style.left = `${cellPosition.left}px`;
      }
    }
  }

  handleOnMouseLeave() {
    // don't forget to destroy tooltip when leaving the cell
    // you could also use the event if you provided cell/row into the class name
    const prevTooltip = document.body.querySelector('.some-tooltip');
    prevTooltip?.remove();
  }
}

/* basic styling */
.basic-tooltip {
  height: 55px;
  width: 125px;
  position: absolute;
  z-index: 10;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}