html table inside ngbTooltip

Question

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

Solution

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