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

Question

语境

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

我尝试过使用 html 和 css 并得到如图所示，工具提示不完全可见，隐藏在表格内

谁能帮我解决这个问题？

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

Answer 1

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

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

请参阅 Bootstrap Tooltips Options，特别是container选项

编辑 2 ( 2021-10-29 )

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

编辑 1

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

<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;
}