如何在HTML属性内运行Angular表达式？Bootstrap 4 Tooltip显示问题

我懂你现在的痛点——Bootstrap 4的Tooltip是基于原生title属性初始化的，Angular的ng-if、ng-hide这类结构型指令没法直接在title里生效，因为Tooltip初始化后就不会再监听DOM的动态变化了。给你几个实用的解决办法，你可以根据自己的场景选择：

1. 用插值表达式+条件判断直接拼接title内容 #

这是最简单的方案，适合内容结构不复杂的场景。直接在title属性里用三元运算符过滤空值，还能结合data-html="true"支持换行：

<button 
  data-toggle="tooltip" 
  data-html="true"
  title="{{ retailSpringPrice ? '零售春季价格：' + retailSpringPrice + '<br>' : '' }} {{ retailFallPrice ? '零售秋季价格：' + retailFallPrice : '' }}"
>
  查看价格详情
</button>

如果担心空值时title为空导致Tooltip不显示，可以加个默认提示：

title="{{ 
  (retailSpringPrice ? '零售春季价格：' + retailSpringPrice + '<br>' : '') + 
  (retailFallPrice ? '零售秋季价格：' + retailFallPrice : '') || 
  '暂无可用零售价格'
}}"

2. 自定义Angular指令动态更新Tooltip #

如果你的价格数据会动态变化，或者需要更复杂的内容展示，自定义指令是最优解。它能监听数据变化，实时更新Tooltip内容：

第一步：创建动态Tooltip指令 #

import { Directive, ElementRef, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import $ from 'jquery';

@Directive({
  selector: '[appDynamicRetailTooltip]'
})
export class DynamicRetailTooltipDirective implements OnInit, OnChanges {
  @Input() retailSpringPrice: string | number;
  @Input() retailFallPrice: string | number;
  @Input() retailPrice: string | number; // 如果需要包含其他零售类价格

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.initTooltip();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 只要任一零售价格变化，就更新Tooltip
    const hasPriceChange = Object.keys(changes).some(key => key.includes('retail'));
    if (hasPriceChange) {
      this.updateTooltip();
    }
  }

  private initTooltip() {
    $(this.el.nativeElement).tooltip({
      html: true,
      title: this.getTooltipContent()
    });
  }

  private updateTooltip() {
    const tooltipInstance = $(this.el.nativeElement).data('bs.tooltip');
    if (tooltipInstance) {
      tooltipInstance.options.title = this.getTooltipContent();
      tooltipInstance.update();
    }
  }

  private getTooltipContent(): string {
    let content = '';
    // 按需求添加需要显示的零售价格项
    if (this.retailSpringPrice) content += `<div>零售春季价格：${this.retailSpringPrice}</div>`;
    if (this.retailFallPrice) content += `<div>零售秋季价格：${this.retailFallPrice}</div>`;
    if (this.retailPrice) content += `<div>零售价格：${this.retailPrice}</div>`;
    
    return content || '<div>暂无零售价格信息</div>';
  }
}

第二步：在模板中使用指令 #

<button 
  appDynamicRetailTooltip
  [retailSpringPrice]="retailSpringPrice"
  [retailFallPrice]="retailFallPrice"
  [retailPrice]="retailPrice"
>
  查看价格详情
</button>

3. 手动控制Tooltip的显示与内容 #

如果不想写指令，也可以通过鼠标事件手动初始化和销毁Tooltip，适合临时场景：

<button 
  (mouseenter)="showRetailTooltip($event)"
  (mouseleave)="hideTooltip($event)"
>
  查看价格详情
</button>

showRetailTooltip(event: MouseEvent) {
  const targetEl = event.target as HTMLElement;
  let tooltipContent = '';

  if (this.retailSpringPrice) tooltipContent += `零售春季价格：${this.retailSpringPrice}\n`;
  if (this.retailFallPrice) tooltipContent += `零售秋季价格：${this.retailFallPrice}`;
  if (this.retailPrice) tooltipContent += `零售价格：${this.retailPrice}`;

  $(targetEl).tooltip({
    title: tooltipContent || '暂无零售价格信息',
    trigger: 'manual' // 手动控制触发
  }).tooltip('show');
}

hideTooltip(event: MouseEvent) {
  const targetEl = event.target as HTMLElement;
  $(targetEl).tooltip('dispose'); // 销毁Tooltip，避免重复初始化
}

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