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