html表格内ngbTooltip

Question

我使用的角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

我搜索了也，很多人建议使用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