How to disable NgbTooltip if tooltip template is empty, in Angular2?

Question

I'm showing an array of data inside a tooltip, so I used a template. My code looks like:

<ng-template #ToolTipTemplate>
    <small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>

<span [ngbTooltip]="ToolTipTemplate">Months: {{data.months.length}}</span>

If data.months is empty I do not want the tooltip to appear. Currently if it's empty it shows the tooltip arrow only.

I've tried adding an *ngIf on the <small> tag inside the template, but that didn't work. I've also tried adding *ngIf into <ng-template> to no avail.

Solution 1

Ok, I was finally able to figure it out. Here's what I had to do

<span [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''">Months: {{data.months.length}}</span>

Solution 2

You can take the element reference like #t="ngbTooltip" and then manually fire the tooltip. In your case fire it if required or don't show the tooltip at all.

<div
   [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''"
  triggers="manual"
  #t="ngbTooltip"
  (mouseenter)="(data.months?.length) && t.open()"
  (mouseleave)="t.close()">
show Tooltip
</div>

Solution 3

Simple way of doing is

<div *ngIf='data.months.length > 0'>
    <ng-template #ToolTipTemplate>
        <small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
    </ng-template>

    <span [ngbTooltip]="ToolTipTemplate">Show Info</span>
</div>
<div *ngIf='data.months.length === 0'>
    <span>Show Info</span>
</div>

Solution 4

You can disable it with

<span [ngbTooltip]="ToolTipTemplate" [disableTooltip]="true">Months: {{data.months.length}}</span>

See docs for more info: https://ng-bootstrap.github.io/#/components/tooltip/api

View more solutions

Comments

[Gene Parcellano]

Thank you for the answer. I was able to find a solution that uses less code.

[Rino Reji Cheriyan]

did you try disableTooltip link

[Eva]

This should be the accepted answer.