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>
Plunker Example
I would recommend always looking for an answer in the documentation
https://ng-bootstrap.github.io/#/components/tooltip
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With