Angular Datatable：如何实现鼠标悬停单元格时展示列数据tooltip

下面提供三种和原有jQuery实现效果一致的Angular原生实现方式，无需依赖jQuery：

方案1：静态列绑定（最常用） #

如果你的表格列是通过*ngFor静态渲染的，直接给<td>标签绑定title属性即可：

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <tbody>
    <tr *ngFor="let row of tableList">
      <td [title]="row.name">{{ row.name }}</td>
      <td [title]="row.age">{{ row.age }}</td>
      <td [title]="row.desc">{{ row.desc }}</td>
    </tr>
  </tbody>
</table>

方案2：动态列配置 #

如果你的列是通过dtOptions的columns配置动态生成的，在列渲染逻辑里加title属性即可：

// 组件内的表格配置
dtOptions: DataTables.Settings = {};

ngOnInit(): void {
  this.dtOptions = {
    ajax: '你的数据接口地址',
    columns: [
      {
        data: 'name',
        render: (data) => `<span title="${data}">${data}</span>`
      },
      {
        data: 'age',
        render: (data) => `<span title="${data}">${data}</span>`
      },
      // 其余列配置同理
    ]
  };
}

方案3：全局事件委托（和jQuery实现逻辑完全一致） #

如果不想逐个配置列，用Angular的事件委托实现全局绑定，动态生成的行也能生效：

import { Component, AfterViewInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-table-page',
  templateUrl: './table-page.component.html'
})
export class TablePageComponent implements AfterViewInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewInit(): void {
    // 仅监听当前组件内的表格事件，避免全局污染
    const tableDom = this.el.nativeElement.querySelector('table[datatable]');
    if (tableDom) {
      // 利用事件委托处理所有td的悬停，动态加载的行也能生效
      this.renderer.listen(tableDom, 'mouseenter', (event: MouseEvent) => {
        const target = event.target as HTMLElement;
        if (target.tagName === 'TD') {
          this.renderer.setAttribute(target, 'title', target.textContent?.trim() || '');
        }
      }, true);
    }
  }
}

补充说明 #

如果需要自定义样式的Tooltip，只需要把上述代码里的原生title替换为你使用的UI组件库的Tooltip指令即可，绑定逻辑完全通用。

内容的提问来源于stack exchange，提问作者Rajasekhar