Question

我使用angular2和bootstrap4。 Popover正确地将原始html呈现为粗体文本 asdf

<img src="assets/images/1.jpg"
                             data-container="body" data-toggle="popover" data-html="true" data-placement="top"
                             [attr.data-content]="getM()"/>

但是，工具提示会呈现为包含标记

的普通<b>asdf</b>文本

<img src="assets/images/2.jpg"
                              data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
                              [attr.title]="getM()"/>

组件方法getM：

  public getM(): string {
    return '<b>asdf</b>';
  }

工具提示和弹出窗口都以相同的方式初始化

$(function () {
  $('[data-toggle="tooltip"]').tooltip({container: 'body'});
  $('[data-toggle="popover"]').popover({container: 'body'});
})

有人能解释为什么会这样，以及如何解决？这似乎与初始化顺序有关，但我不知道在哪里进一步查看。

Answer 1

嗯，问题是我的元素（附加了工具提示）是动态创建的。

确切地说，我有1秒的延迟服务。当新数据到达时，我的组件中的<img>元素已重新创建，但$('[data-toggle="tooltip"]')选择器无法使用动态元素。

相反，我必须使用这个选择器

 $("body").tooltip({selector: '[data-toggle="tooltip"]'});

现在它按预期工作。

PS我不是前端开发人员，所以任何能够以更好的方式解释它的人都会受到欢迎。

angular2 bootstrap4工具提示不会渲染html，而popover也是如此

1 个答案: