How to create custom tooltip with formatter in Angular slickgrid without creating angular component?

Question

Context

When hovering on row data i want to show tool-tip with custom-data, I don't want to use Angular components or bootstrap tool-tip instead simple html and css, so that i can use it with Angular Slick-grid formatter

I have tried with html and css and got like as shown in image, tooltip is not completely visible, getting hidden inside the table

Can anyone help me out with this?

Environment Angular - 8.2.14, Angular-Slickgrid - 2.22.4, TypeScript - 3.7

Answer 1

Because of how the CSS styling is done in SlickGrid you need to find a library that has the option to render the tooltip on the "body" container not just on the cell container (that is what you tried). If you use Bootstrap Tooltip, then that would be this line that they wrote on their website

Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).

See the Bootstrap Tooltips Options, specifically the container option

EDIT 2 (2021-10-29)

With the code shown below, I created a new plugin for Angular-Slickgrid and SlickGrid. You can see a live Example 32 - Custom Tooltip of the new plugin in action for Angular-Slickgrid version 3.3.0 and up. It works with a lot of use cases, with [title] attribute or by providing a Custom Tooltip Formatter, it also has an async option to work with API async calls (Promise/Observable).

EDIT 1

I played with this again since I also want to add basic tooltip support (possibly without any tooltip lib), and below is a very basic and functional tooltip using SlickGrid onMouseEnter and onMouseLeave events. This answer uses some from an older 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;
}