从 Angular 2 输入更改引导工具提示文本

Question

我正在使用 Angular 2 和 Bootstrap 3 tooltip。我在布局中有一个侧边栏和一个主要内容屏幕。在侧栏中，用户可以更改内容中项目的工具提示文本。

因为工具提示文本没有更新，所以开我的玩笑。因此，一个对象通过@Input() 与工具提示文本一起传递到我的内容面板中。然后是通过[attr.title]=panel.tooltiptext 绑定的数据。

现在，如果您更新工具提示文本，然后将鼠标悬停在文本上，您会看到工具提示文本未更新但继续悬停，您将看到带有正确文本的 vanilla html 标题弹出。

Plunker示例

ma​​in.component.ts - 这就像我的侧边栏，比内容面板更高。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{desc}}</h2>

      <tooltip-comp [panel]="panelObj"></tooltip-comp> <br>

      <input [(ngModel)]="panelObj.tooltipText" style="width: 250px;" />
    </div>
  `,
})
export class App implements OnInit {
  desc:string = 'Change tooltip text';
  panelObj = {
    tooltipText: "The Power of the "
  };

  constructor() {}

  ngOnInit() {

  }
}

tooltip.component.ts - 这是获取包含更新的工具提示文本的对象的内容面板。

@Component({
  selector: 'tooltip-comp',
  template: `
    <div>
      <a id="blah" href="#" data-toggle="tooltip" [attr.title]="panel.tooltipText">You Don't Know</a> <br><br>
    </div>
  `,
})
export class TooltipComponent implements OnInit {
  @Input() panel: string;

  constructor() {}

  ngAfterViewInit() {
    $('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
  }

  ngOnInit() {

  }
}

Answer 1

您可以使用data-original-title 属性来动态更新您的工具提示。

[attr.data-original-title]="panel.tooltipText"

Modified Plunker