I am using angular 4 with bootstrap 4 and ng-bootstrap. I have a requirement where when user hovers over an info icon, a html table should be displayed as right tooltip. This is the line of code where I am using the tool tip:
<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>
Right now, if I hover over the icon I only get the content mentioned in ngbTooltip. I tried putting html code, something like ngbTooltip="<h1>Test Content</h1>" but it just displays everything as text and not h1
I searched SO also, many people suggested to use jquery plugin for this, but am afraid, I am not allowed to use jquery plugin here. So, is there anyway I can get a html table here on hover or any other work around??
TIA
You should pass TemplateRef to ngbTooltip directive to display html inside tooltip.
<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>
I would recommend always looking for an answer in the documentation