Hey there! Let's figure out how to get that tooltip working next to your buttons the right Angular way—no messy direct DOM manipulation required. 😊

The Angular-Friendly Approach: Data Binding + CSS Positioning (Simple Scenario) #

For basic tooltip positioning, we can leverage declarative data binding (Angular's bread and butter) and CSS relative/absolute positioning. This keeps everything aligned with Angular's data-driven philosophy.

Step 1: Refactor Your Template

Wrap each button and its corresponding tooltip in a parent container. This lets us use the parent's position as a reference for the tooltip:

<div class="figure-item" *ngFor='let figure of figures'>
  <!-- Add hover/click events to trigger tooltip -->
  <button 
    (click)='toggleTooltip(figure)'
    (mouseenter)="showTooltip(figure)"
    (mouseleave)="hideTooltip()">
    {{ figure.figureName }}
  </button>

  <!-- Only show tooltip if it matches the active figure -->
  <div *ngIf='figureToShowDetails?.id === figure.id' class='figure-tooltip'>
    <app-figure-tooltip [figure]="figureToShowDetails"></app-figure-tooltip>
  </div>
</div>

Note: Make sure your figure objects have a unique id property to correctly map buttons to tooltips.

Step 2: Add CSS for Positioning

Use relative positioning on the parent container, then absolute positioning for the tooltip to pin it next to the button:

.figure-item {
  position: relative;
  display: inline-block; /* Keep buttons and tooltips aligned horizontally */
  margin: 0 10px 10px 0;
}

.figure-tooltip {
  position: absolute;
  top: 100%; /* Place tooltip directly below the button */
  left: 0;
  margin-top: 5px;
  z-index: 1000; /* Ensure tooltip stays above other content */
  /* Add styling for visibility */
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Step 3: Update Component Logic

Manage the active figure with simple class properties and methods—no DOM touching needed:

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

@Component({
  selector: 'app-figures-list',
  templateUrl: './figures-list.component.html',
  styleUrls: ['./figures-list.component.css']
})
export class AppFiguresListComponent {
  figures = [/* Your figure data here, each with id and figureName */];
  figureToShowDetails: any = null;

  showTooltip(figure: any) {
    this.figureToShowDetails = figure;
  }

  hideTooltip() {
    this.figureToShowDetails = null;
  }

  toggleTooltip(figure: any) {
    // Toggle tooltip on click: show if hidden, hide if already active
    this.figureToShowDetails = this.figureToShowDetails?.id === figure.id 
      ? null 
      : figure;
  }
}

Advanced Scenario: Angular CDK Overlay (For Complex Positioning) #

If you need more robust behavior (like avoiding tooltip overflow off the screen, adjusting position on scroll, or reusable tooltips), the Angular CDK Overlay module is the official, Angular-approved solution.

Step 1: Install the CDK

npm install @angular/cdk

Step 2: Import OverlayModule

Add it to your component's module:

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
    // ... other modules (CommonModule, etc.)
    OverlayModule
  ],
  declarations: [AppFiguresListComponent, AppFigureTooltipComponent]
})
export class YourModule { }

Step 3: Component Logic with CDK

Use the Overlay service to create and position the tooltip dynamically:

import { Component } from '@angular/core';
import { Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { AppFigureTooltipComponent } from './app-figure-tooltip.component';

@Component({
  selector: 'app-figures-list',
  templateUrl: './figures-list.component.html'
})
export class AppFiguresListComponent {
  figures = [/* Your figure data */];
  private overlayRef: OverlayRef | null = null;

  constructor(
    private overlay: Overlay,
    private positionBuilder: OverlayPositionBuilder
  ) {}

  showTooltip(figure: any, buttonElement: HTMLElement) {
    // Clean up existing tooltip first
    this.hideTooltip();

    // Define position strategy: anchor to the button's bottom-center
    const positionStrategy: PositionStrategy = this.positionBuilder
      .flexibleConnectedTo(buttonElement)
      .withPositions([{
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
        offsetY: 5 // Small gap between button and tooltip
      }]);

    // Create the overlay
    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition(), // Adjust position on scroll
      hasBackdrop: false // No background overlay needed
    });

    // Attach the tooltip component to the overlay
    const tooltipPortal = new ComponentPortal(AppFigureTooltipComponent);
    const tooltipRef = this.overlayRef.attach(tooltipPortal);
    tooltipRef.instance.figure = figure; // Pass figure data to tooltip (assuming @Input() figure exists)
  }

  hideTooltip() {
    if (this.overlayRef) {
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }

  toggleTooltip(figure: any, buttonElement: HTMLElement) {
    if (this.overlayRef) {
      this.hideTooltip();
    } else {
      this.showTooltip(figure, buttonElement);
    }
  }
}

Step 4: Update the Template

Pass the button element to your methods using a template reference variable:

<div *ngFor='let figure of figures'>
  <button 
    #figureButton
    (click)='toggleTooltip(figure, figureButton)'
    (mouseenter)="showTooltip(figure, figureButton)"
    (mouseleave)="hideTooltip()">
    {{ figure.figureName }}
  </button>
</div>

Why Your Original DOM Manipulation Approach Wasn't Ideal #

Directly using ElementRef, Renderer, or Renderer2 to tweak DOM positions skips Angular's change detection system, leads to tightly coupled code, and can cause memory leaks if not cleaned up properly. Angular is designed around declarative data binding and using official utilities (like the CDK) ensures your code stays maintainable and aligned with framework best practices.

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