Show Tooltip Only When Hovering Over Image in Custom Angular AG-Grid Cell Renderer

I am using Angular and AG Grid to create a table with custom cell renderers. One of my columns contains both text and an image. I also have a custom tooltip component for this column. My goal is to show the tooltip only when I hover over the image, not when hovering over the text.

Here is what I have so far:

CustomCellRenderer Component (cell-renderer.component.ts):

import { Component } from '@angular/core';

@Component({
selector: 'app-cell-renderer',
template: `
<div class="custom-cell" (mouseenter)="showTooltip()" (mouseleave)="hideTooltip()">
<img src="{{params.data.imageUrl}}" alt="icon" class="custom-image" (mouseenter)="showTooltip()" (mouseleave)="hideTooltip()" />
<span class="custom-text">{{params.value}}</span>
<app-custom-tooltip *ngIf="tooltipVisible" [tooltipContent]="tooltipContent"></app-custom-tooltip>
</div>
`,
styles: [`
.custom-cell {
display: flex;
align-items: center;
position: relative;
}
.custom-image {
width: 20px;
height: 20px;
margin-right: 5px;
}
.custom-text {
display: inline-block;
}
`]
})
export class CellRendererComponent {
params: any;
tooltipVisible: boolean = false;
tooltipContent: string = 'Tooltip Content';

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

showTooltip(): void {
this.tooltipVisible = true;
}

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

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-custom-tooltip',
template: `
<div class="custom-tooltip">{{ tooltipContent }}</div>
`,
styles: [`
.custom-tooltip {
display: block;
position: absolute;
background: #fff;
border: 1px solid #ccc;
padding: 5px;
z-index: 10;
}
`]
})
export class CustomTooltipComponent {
@Input() tooltipContent: string;
}
import { Component } from '@angular/core';
import { CellRendererComponent } from './cell-renderer.component';
import { CustomTooltipComponent } from './custom-tooltip.component';

@Component({
selector: 'app-root',
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents">
</ag-grid-angular>`,
styles: [`
:host ::ng-deep .custom-tooltip {
display: none;
}
:host ::ng-deep .ag-tooltip {
display: block;
}
`]
})
export class AppComponent {
rowData = [
{ imageUrl: 'path/to/image.png', value: 'Some text', tooltipContent: 'Tooltip Content' }
];

columnDefs = [
{
field: 'value',
cellRenderer: 'customCellRenderer',
tooltipComponent: 'customTooltip'
}
];

frameworkComponents = {
customCellRenderer: CellRendererComponent,
customTooltip: CustomTooltipComponent
};
}


However, the tooltip appears for both the image and text. I need the tooltip to show only when hovering over the image part of the cell, not the text. What changes do I need to make to achieve this? Any help is greatly appreciated!

Continue reading...