Angular 7中如何在图标/span的tooltip中渲染HTML内容？

可以实现，下面提供两种实用方案：

方案一：自定义Tooltip指令（完全自定义可控） #

适合需要高度定制Tooltip样式和交互的场景，基于Angular CDK的Overlay实现：

1. 创建自定义指令 #

import { Directive, ElementRef, Input, TemplateRef, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
import { Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';

@Directive({
  selector: '[appHtmlTooltip]'
})
export class HtmlTooltipDirective implements OnInit, OnDestroy {
  @Input('appHtmlTooltip') tooltipContent: TemplateRef<any>;
  private overlayRef: OverlayRef;

  constructor(
    private elementRef: ElementRef,
    private overlay: Overlay,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit(): void {
    this.createOverlay();
    this.attachTooltip();
    this.bindEvents();
  }

  private createOverlay(): void {
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(this.elementRef)
      .withPositions([{
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
        offsetY: 8
      }]);

    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      hasBackdrop: false
    });
  }

  private attachTooltip(): void {
    const portal = new TemplatePortal(this.tooltipContent, this.viewContainerRef);
    this.overlayRef.attach(portal);
    this.overlayRef.hide();
  }

  private bindEvents(): void {
    const el = this.elementRef.nativeElement;
    el.addEventListener('mouseenter', () => this.overlayRef.show());
    el.addEventListener('mouseleave', () => this.overlayRef.hide());
    el.addEventListener('focus', () => this.overlayRef.show());
    el.addEventListener('blur', () => this.overlayRef.hide());
  }

  ngOnDestroy(): void {
    this.overlayRef?.dispose();
  }
}

2. 在组件中使用 #

<!-- 目标元素：图标或span -->
<span appHtmlTooltip [appHtmlTooltip]="htmlTooltip">悬停查看HTML提示</span>

<!-- 定义Tooltip的HTML内容模板 -->
<ng-template #htmlTooltip>
  <div class="custom-tooltip">
    <h4>自定义提示标题</h4>
    <p>支持<strong>加粗文本</strong>、<em>斜体样式</em></p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  </div>
</ng-template>

3. 添加样式 #

.custom-tooltip {
  padding: 8px 12px;
  background-color: #2d2d2d;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-width: 220px;
}

方案二：使用Ng Bootstrap的Tooltip（快速实现） #

如果项目已引入Ng Bootstrap，可直接利用其支持HTML的Tooltip功能：

1. 安装依赖 #

npm install @ng-bootstrap/ng-bootstrap --save

2. 模块中导入 #

import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbTooltipModule]
})
export class YourModule {}

3. 组件中使用 #

<!-- 直接传入HTML字符串（注意XSS风险） -->
<span [ngbTooltip]="'<h4>HTML提示</h4><p>包含<strong>高亮内容</strong></p>'" [html]="true">悬停查看</span>

<!-- 或使用模板引用（更安全，支持复杂结构） -->
<span [ngbTooltip]="tooltipTemplate" [html]="true">悬停查看模板内容</span>
<ng-template #tooltipTemplate>
  <div>
    <h4>模板渲染的提示</h4>
    <p>这是来自组件模板的HTML内容</p>
  </div>
</ng-template>

注意事项 #

• 渲染HTML时需确保内容可信，避免未过滤的用户输入引发XSS攻击；
• 自定义指令需在ngOnDestroy中清理Overlay资源，防止内存泄漏。

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