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

Question

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

虽然因为工具提示文本没有更新而对我开玩笑.因此,对象将通过工具提示文本传递到我的内容面板中@Input().然后通过数据绑定[attr.title]=panel.tooltiptext.

现在,如果您更新工具提示文本,然后将鼠标悬停在文本上,您会看到工具提示文本未更新但仍保持悬停状态,您将看到带有正确文本的vanilla html标题.

Plunker的例子

main.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"

改良的Plunker