Question

我正在开发Angular 2项目，我使用bootstrap工具提示。我有API提取的项目名称。我想在一个组件上悬停时在工具提示中显示这个项目名称。是否可以在html中添加此数据？

Answer 1

添加data-toggle="tooltip"以在组件悬停时添加工具提示。您可能需要使用$('[data-toggle="tooltip"]').tooltip()文件中的.ts对其进行初始化。

<app-differen-component data-toggle="tooltip" title="Some tooltip content">

</app-differen-component>

Answer 2

您可以使用像https://ng-bootstrap.github.io/#/components/tooltip/examples这样的第三方库：

<p>
  Tooltips can contain any arbitrary HTML, Angular bindings and even directives!
  Simply enclose desired content in a <code>&lt;ng-template&gt;</code> element.
</p>

<ng-template #tipContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbTooltip]="tipContent">
  I've got markup and bindings in my tooltip!
</button>

引导工具提示中的HTML

2 个答案: