Question

我正在使用带有bootstrap 4和ng-bootstrap的angular 4。我有一个要求，当用户将鼠标悬停在信息图标上时，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>

<强> Plunker Example

我建议总是在文档中寻找答案

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

ngbTooltip

1 个答案: