Question

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

虽然因为工具提示文本没有更新而对我开玩笑。因此，通过@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"

<强> Modified Plunker

从Angular 2输入

1 个答案: