Angular 12中如何为img标签的title属性设置HTML内容？

• 核心原因：原生HTML的title属性仅支持纯文本内容，无法解析渲染HTML，所以即使你用DOM清理处理了HTML字符串，鼠标悬停时依然只会显示原始代码。

可行解决方案：使用自定义HTML Tooltip #

方案1：借助Angular Material Tooltip（推荐） #

Angular Material的matTooltip支持绑定HTML内容，只需开启对应配置并配合innerHTML即可：

1. 先导入Angular Material的Tooltip模块：

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [MatTooltipModule]
})
export class AppModule {}

2. 在模板中使用：

<img 
  src="your-image-url"
  [matTooltip]="htmlContent"
  matTooltipClass="custom-tooltip"
>

3. 在组件中用DomSanitizer处理HTML内容（确保安全）：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

export class AppComponent {
  htmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const rawHtml = '<span style="color:blue;font-weight:bold;"> <sup>superscript</sup> </span>';
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

4. 添加CSS确保HTML正常渲染：

.custom-tooltip {
  white-space: pre-wrap;
}

方案2：手写自定义Tooltip指令 #

如果不想引入Angular Material，可以自己实现简单指令：

1. 创建Tooltip指令，监听鼠标事件动态生成带HTML的tooltip元素：

import { Directive, ElementRef, Input, Renderer2, HostListener } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Directive({
  selector: '[htmlTooltip]'
})
export class HtmlTooltipDirective {
  @Input() htmlTooltip: SafeHtml;
  private tooltipElement: HTMLElement;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private sanitizer: DomSanitizer
  ) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.createTooltip();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.destroyTooltip();
  }

  private createTooltip() {
    this.tooltipElement = this.renderer.createElement('div');
    // 设置基础样式
    this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');
    this.renderer.setStyle(this.tooltipElement, 'background', '#333');
    this.renderer.setStyle(this.tooltipElement, 'color', '#fff');
    this.renderer.setStyle(this.tooltipElement, 'padding', '4px 8px');
    this.renderer.setStyle(this.tooltipElement, 'border-radius', '4px');
    // 绑定HTML内容
    this.tooltipElement.innerHTML = this.sanitizer.sanitize(4, this.htmlTooltip) || '';
    // 添加到页面并定位
    this.renderer.appendChild(document.body, this.tooltipElement);
    const rect = this.el.nativeElement.getBoundingClientRect();
    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.bottom + window.scrollY + 8}px`);
    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.left + window.scrollX}px`);
  }

  private destroyTooltip() {
    if (this.tooltipElement) {
      this.renderer.removeChild(document.body, this.tooltipElement);
      this.tooltipElement = null;
    }
  }
}

2. 在模板中使用：

<img 
  src="your-image-url"
  [htmlTooltip]="htmlContent"
>

3. 组件中同样需要用DomSanitizer处理HTML内容，步骤同方案1。

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