Angular自定义AG-Grid单元格渲染器中仅在悬停图片时显示Tooltip

嘿，我来帮你解决这个问题！你现在的代码里把tooltip的触发事件绑在了整个单元格的外层div上，这就导致不管你悬停在文本还是图片上，tooltip都会弹出来。咱们只需要调整事件绑定的位置，再优化一下逻辑就能搞定。

第一步：修改自定义单元格渲染器的模板和逻辑 #

你需要移除外层div的鼠标事件，只给图片绑定显示/隐藏tooltip的触发，同时给文本添加事件确保鼠标移上去时tooltip会隐藏。修改后的组件代码如下：

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

@Component({
  selector: 'app-cell-renderer',
  template: `
    <div class="custom-cell">
      <img 
        src="{{params.data.imageUrl}}" 
        alt="icon" 
        class="custom-image" 
        (mouseenter)="showTooltip()" 
        (mouseleave)="hideTooltip()"
      />
      <span 
        class="custom-text" 
        (mouseenter)="hideTooltip()"
      >{{params.value}}</span>
      <app-custom-tooltip *ngIf="tooltipVisible" [tooltipContent]="tooltipContent"></app-custom-tooltip>
    </div>
  `,
  styles: [`
    .custom-cell {
      display: flex;
      align-items: center;
      gap: 8px; /* 给图片和文本之间留点间距 */
      padding: 4px;
    }
    .custom-image {
      width: 20px;
      height: 20px;
      cursor: help; /* 给图片加个帮助光标，提示用户可悬停 */
    }
  `]
})
export class CellRendererComponent implements ICellRendererAngularComp {
  params: any;
  tooltipVisible = false;
  tooltipContent: string;

  agInit(params: any): void {
    this.params = params;
    // 这里假设你的tooltip内容存在params.data里，根据实际情况调整
    this.tooltipContent = params.data.tooltipContent;
  }

  refresh(params: any): boolean {
    this.params = params;
    this.tooltipContent = params.data.tooltipContent;
    return true;
  }

  showTooltip() {
    this.tooltipVisible = true;
  }

  hideTooltip() {
    this.tooltipVisible = false;
  }
}

第二步：确保AG Grid自带tooltip不冲突 #

如果你之前在列定义里配置了AG Grid的自带tooltip（比如tooltipField或tooltipGetter），记得把它们注释掉，避免和你的自定义tooltip组件冲突：

// 你的列定义示例
columnDefs = [
  // ...其他列配置
  {
    headerName: '带图标的列',
    field: 'textValue',
    cellRenderer: 'appCellRenderer',
    // 注释掉这些AG Grid自带的tooltip配置
    // tooltipField: 'tooltipContent',
    // tooltipGetter: (params) => params.data.tooltipContent,
  }
];

逻辑说明 #

• 只在<img>标签上绑定mouseenter和mouseleave事件，确保只有悬停图片时才显示tooltip
• 在文本的<span>上绑定mouseenter事件，当鼠标移到文本上时立刻隐藏tooltip，避免从图片滑到文本时tooltip还停留在页面上
• 添加了基础样式让单元格布局更美观，同时给图片添加帮助光标，提升用户体验

这样调整后，就完全实现了你要的“仅悬停图片时显示tooltip”的需求啦！

备注：内容来源于stack exchange，提问作者max