在AG网格中，仅显示溢出单元格的文本的工具提示

Question

我有一个有两列的农业网格表。对于第一列，我显示名称和区域。当用户将鼠标悬停在名称和区域上时，我希望名称显示在工具提示中。这是正在工作的部分。我想仅在单元格文本溢出时（当您在文本末尾看到省略号时）显示工具提示。我怎样才能做到这一点？

我尝试了在 Stack Overflow 上找到的其他解决方案，但它们对我不起作用。

src/app/tooltip-cell-renderer/tooltip-cell-renderer.component.ts

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  selector: 'app-tooltip-cell-renderer',

  template: `
    <span
      class="tooltip-cell-renderer"
      [ngbTooltip]="params.data.name"
      [container]="'body'"
    >
      {{ params.data.name }}, leader of {{params.data.region}}
    </span>
  `,
})
export class TooltipCellRendererComponent implements ICellRendererAngularComp {
  params!: ICellRendererParams;

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  refresh(): boolean {
    return true;
  }
}

src/app/app.component.html

<ag-grid-angular
style="width: 500px; height: 500px"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [defaultColDef]="defaultColDef"
  [columnDefs]="columnDefs"
></ag-grid-angular>

src/app/app.component.ts

import { Component } from '@angular/core';
import { ColDef, GridOptions } from 'ag-grid-community';
import { TooltipCellRendererComponent } from './tooltip-cell-renderer/tooltip-cell-renderer.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'tooltip-example';

  gridOptions: GridOptions = {}
  defaultColDef: ColDef = {
    flex: 3
  };
  columnDefs: ColDef[];
  rowData!: any[]

  constructor() {
    this.columnDefs = [
      {
        headerName: 'Name',
        field: 'name',
        cellRenderer: TooltipCellRendererComponent
      },
      {
        headerName: 'Type of govt',
        field: 'govt'
      }
    ]
  }

  ngOnInit() {
    this.rowData = [
      {
        name: 'Narendra Modi',
        region: 'India',
        govt: 'democracy'
      }, 
      {
        name: 'Joe Biden',
        region: 'USA'
      }, 
      {
        name: 'Volodymyr Oleksandrovych Zelenskyy',
        region: 'Ukraine'
      }
    ]
  }
}

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TooltipCellRendererComponent } from './tooltip-cell-renderer/tooltip-cell-renderer.component';
import { AgGridModule } from 'ag-grid-angular';
import { NgbTooltipModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    TooltipCellRendererComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule,
    NgbTooltipModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "tooltip-example",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@ng-bootstrap/ng-bootstrap": "^14.2.0",
    "@popperjs/core": "^2.11.6",
    "ag-grid-angular": "^30.1.0",
    "ag-grid-community": "^30.1.0",
    "bootstrap": "^5.2.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.3",
    "@angular/cli": "~15.1.3",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/localize": "^15.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

Answer 1

您可以创建一个指令来检查 offsetWidth < scrollWidth of your element

@Directive({
  selector: '[autoTooltip]',
  standalone: true,
})
export class AutoTooltip implements AfterViewInit {
  @Input() autoTooltip!: string; //if not set we use the "innerHTML"

  //see how inject the "NgbTooltip"
  constructor(private el: ElementRef, private tooltip: NgbTooltip) {}
  ngAfterViewInit() {
    if (this.el.nativeElement.offsetWidth < this.el.nativeElement.scrollWidth)
    {
      //to give value to the tooltip you use this.tootip.ngbTooltip
      this.tooltip.ngbTooltip = this.autoTooltip
        ? this.autoTooltip
        : this.el.nativeElement.innerHTML;
    }
  }
}

然后就可以使用了

<span autoTooltip style="display:inline-block;width:10rem" 
     class="ellipsis" placement="top" ngbTooltip>
    Tooltip on top but longger
</span>

A stackblitz（注意：stackblitz 只有 ngbTooltip，没有 ag-grid）