Angular：如何在运行时为div元素添加matTooltip悬浮提示

问题原因 #

你原来的写法无法生效的核心原因是：matTooltip是Angular Material提供的框架级指令，仅通过Renderer2添加普通HTML属性不会被Angular的编译逻辑识别，无法实例化对应的指令实例触发悬停交互逻辑。 #

解决方案 #

方案1：手动绑定MatTooltip实例（简单快捷） #

直接复用Angular Material提供的MatTooltip服务实例，绑定到你动态创建的DOM节点上，适合快速实现需求：

1. 首先确保你当前功能所属的NgModule已经导入了MatTooltipModule
2. 修改你的自定义指令代码如下：

import { Directive, ElementRef, Input, OnInit, Renderer2, ChangeDetectorRef } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[appTextBlock]',
  // 这里需要提供MatTooltip实例
  providers: [MatTooltip]
})
export class MyDirective implements OnInit {

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2,
    private tooltip: MatTooltip,
    private cdr: ChangeDetectorRef
  ) { }

  ngOnInit(): void { }


  public testMethod(toolTip:string){
    const pNode = this.renderer.createElement('div');
    const text = this.renderer.createText('myText');
    this.renderer.appendChild(pNode,text);
    this.renderer.appendChild(this.elementRef.nativeElement, pNode);

    // 绑定tooltip到动态创建的div
    this.tooltip._elementRef = new ElementRef(pNode);
    // 设置tooltip内容
    this.tooltip.message = toolTip;
    // 可选配置：位置、显示/隐藏延迟等
    this.tooltip.position = 'right';
    this.tooltip.showDelay = 300;
    this.tooltip.hideDelay = 100;
    // 初始化tooltip
    this.tooltip.ngOnInit();
    this.cdr.markForCheck();
  }
}

注意：该方案用到了MatTooltip的私有属性_elementRef，如果后续Angular Material版本升级出现不兼容，可以改用方案2。

方案2：动态组件实现（官方推荐，兼容性强） #

通过Angular动态组件能力创建内置matTooltip的模板，不会依赖框架内部属性，稳定性更高：

1. 先创建一个最小的Tooltip组件：

// tooltip-block.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tooltip-block',
  template: `<div [matTooltip]="tooltipContent">{{text}}</div>`
})
export class TooltipBlockComponent {
  @Input() text = 'myText';
  @Input() tooltipContent = '';
}

2. 在所属NgModule的declarations中注册该组件，Angular 9以下版本还需要额外添加到entryComponents数组中
3. 修改你的自定义指令代码：

import { Directive, ElementRef, Input, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { TooltipBlockComponent } from './tooltip-block.component';

@Directive({
  selector: '[appTextBlock]'
})
export class MyDirective implements OnInit {

  constructor(
    private elementRef: ElementRef,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit(): void { }


  public testMethod(toolTip:string){
    const factory = this.componentFactoryResolver.resolveComponentFactory(TooltipBlockComponent);
    const componentRef = this.viewContainerRef.createComponent(factory);
    // 赋值文本和tooltip内容
    componentRef.instance.text = 'myText';
    componentRef.instance.tooltipContent = toolTip;
    // 把创建的组件DOM挂载到当前指令宿主元素下
    this.elementRef.nativeElement.appendChild(componentRef.location.nativeElement);
  }
}

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