Untitled

COMPONENTE TOOLTIP



FRONT HTML

<span>
  <a
    (click)="viewMetadata($event, params.data.filename)"
    (mouseenter)="showTooltip($event, 'View Metadata')"
    (mouseleave)="hideTooltip()"


BACK.TS FILE

import { Component, HostListener, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MetadataDialogComponent } from '@app-pages/home/components/metadata-dialog/metadata-dialog.component';
import { HomeService } from '@app-pages/home/services/home.service';
import { AgRendererComponent } from 'ag-grid-angular';
import { fromEvent, Subject, switchMap, takeUntil, tap } from 'rxjs';

@Component({
  selector: 'app-tooltip-lp-cell',
  templateUrl: './tooltip-lp-cell.component.html',
  styleUrls: ['./tooltip-lp-cell.component.css'],
})
export class TooltipLPCellComponent implements AgRendererComponent {
  private destroy$ = new Subject<void>();
  constructor(private service: HomeService, public dialog: MatDialog) {
    this.hideTooltip();
  }
  readonly TOOLTIP_CLASS = 'cell-tooltip';
  @Input() params: any;

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

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

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  showTooltip(event: MouseEvent, metadata: any) {
    this.service
      .getMetadata(this.params.data.filename)
      .subscribe((metadata) => {
        console.log(`showTooltip metadata retorno da api =`, metadata);
        const div = document.createElement('div');
        div.classList.add(this.TOOLTIP_CLASS);
        div.style.left = `${event.pageX - 230}px`;
        div.style.top = `${event.pageY + 30}px`;
        div.style.width = '20%';
        div.innerHTML = `
            <div style="margin-bottom: 5px;"><strong>Filename:</strong> ${
              metadata.filename
            }</div>
            <div style="margin-bottom: 5px;"><strong>Title:</strong> ${
              metadata.title
            }</div>
            <div style="margin-bottom: 5px;"><strong>Technologist Name:</strong> ${
              metadata.technologist_name
            }</div>
            <div style="margin-bottom: 5px;"><strong>Technician Name:</strong> ${
              metadata.technician_name
            }</div>
            <div style="margin-bottom: 5px;"><strong>Document Date:</strong> ${new Date(
              metadata.document_date
            ).toLocaleString()}</div>
            <div style="margin-bottom: 5px;"><strong>UTC Date:</strong> ${new Date(
              metadata.dt_utc
            ).toLocaleString()}</div>
        `;
        document.body.appendChild(div);
      });
  }

  hideTooltip() {
    const elements = document.getElementsByClassName(
      this.TOOLTIP_CLASS
    ) as HTMLCollectionOf<HTMLElement>;
    console.log(elements);
    while (elements.length > 0) {
      for (let i = 0; i < elements.length; i++) {
        elements[i].style.display = 'none';
      }
      elements[0].parentNode?.removeChild(elements[0]);
    }
  }

  viewMetadata(event: MouseEvent, fileName: string) {
    event.preventDefault();
    this.service
      .getMetadata(fileName)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (metadata) => {
          this.showMetadataModal(metadata);
        },
        error: (error) => {
          console.error('Failed to fetch metadata', error);
        },
      });
  }

  showMetadataModal(metadata: any) {
    const dialogRef = this.dialog.open(MetadataDialogComponent, {
      width: '500px',
      data: metadata,
    });

    dialogRef.afterClosed().subscribe((result) => {
      console.log('The dialog was closed');
    });
  }
}


STYLES.SCSS:

.cell-tooltip {
  position: absolute;
  background-color: #faf5f5cc;
  font-size: medium;
  box-shadow: 0px 1px 5px 0px rgb(63, 63, 63);
  color: black;
  padding: 5px;
  border-radius: 4px;
  z-index: 1000;
}
.cell-tooltip:hover {
  cursor: pointer;
}

COMPONENTE com AG GRID QUE CHAMA ESSE COMPONENTE TOOLTIP

{
            headerName: 'Metadata',
            flex: 1,
            cellRenderer: TooltipLPCellComponent
          }
		  
		  
		  
		  quando passo o mouse em um e mostra o toolltip, fica tudo certo.
		  
		  Quando passo o mouse em varios seguidamente os tooltips vao se abrindo e nao se fecham mais.