html table 在 ngbTooltip 里面

Question

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

<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 table 吗？？

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>

Plunker Example

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

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

html table 在 ngbTooltip 里面

html table inside ngbTooltip

tooltip

ng-bootstrap

angular