ngbTooltip中的html表

Question

我正在使用angular 4和bootstrap 4和ng-bootstrap。我有一个要求，当用户将鼠标悬停在信息图标上时，应将html表显示为正确的工具提示。这是我使用工具提示的代码行：

<i class="fa fa-info-circle" aria-hidden="true" style="margin-top: auto; color: skyblue; padding-bottom: 5px;" placement="right" ngbTooltip="Tooltip on right"></i>

现在，如果我将鼠标悬停在图标上，则只会得到ngbTooltip中提到的内容。我试着将html代码放进去，就像这样， ngbTooltip="<h1>Test Content</h1>"但是它只是将所有内容显示为文本，而不是h1

我也搜索了SO，很多人建议为此使用jquery插件，但是恐怕我这里不允许使用jquery插件。所以，无论如何，我可以在此处悬停获取html表或其他解决方法吗？

TIA

Answer 1

您应该传递TemplateRef给 ngbTooltip指令以在工具提示中显示html。

<ng-template #htmlContent>
  <table>
    <tr *ngFor="let item of items">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </table>
</ng-template>
<i class="fa fa-info-circle" placement="right" [ngbTooltip]="htmlContent"></i>

柱塞示例

我建议您始终在文档中寻找答案

https://ng-bootstrap.github.io/#/components/tooltip