I'm using Tooltip for Angular (ng2-tooltip-directive) to show tooltips in my application.

Taking as an example the following code, how can I hide tooltips each time the title is undefined?

//HTML
<div tooltip="{{title}}"></div>

//TS
export class Component {
    title: string = undefined
}

Note: For this case, the tooltip is being shown without any text on it.

Moreover in here you have an full workable example

I'm using Tooltip for Angular (ng2-tooltip-directive) to show tooltips in my application.

Taking as an example the following code, how can I hide tooltips each time the title is undefined?

//HTML
<div tooltip="{{title}}"></div>

//TS
export class Component {
    title: string = undefined
}

Note: For this case, the tooltip is being shown without any text on it.

Moreover in here you have an full workable example

• javascript
• html
• css
• angular
• ng2-tooltip-directive

3 Answers 3

<span [tooltip]="errorMessage" [display]="showTooltip" content-type="template" placement="right" show-delay="100" hide-delay="500">

there is a display attribute for the ng2 tooltip. You can use that. Here I have assigned a boolean variable showTooltip to the attribute.

Use *ngIf

<ng-container *ngIf="title">
    <div tooltip="{{title}}"></div>
<ng-container>
<ng-container *ngIf="title == null">
     <div></div>
<ng-container>

I tried many times to hide the tooltip with a condition in ng2-tooltip-directive. They are providing the element selection and other features in Pro version. So it can be done in pro version.

For Angular material design there is other good tooltip libraries available.

Note: If you are iterating the items then using *ngIf title and tooltip="" is not remended as we are duplicating all the code.

You can use ngbTooltip instead, if you are using bootstrap with your project:

https://ng-bootstrap.github.io/#/ponents/tooltip/examples

npm module

@ng-bootstrap/ng-bootstrap

app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [
  ....
  NgbModule,
  ....
]

.html

<ng-template #TooltipContent>
 <div>This file belongs to <b>
  {{file.owner.name}}</b>
 </div>
</ng-template> 

<div *ngFor="let file of files">
  .....
  <div [ngbTooltip]="file.owner.name ? TooltipContent : ''">
    .....
    .....
  </div>
  .....
  .....
</div>

In the above example, the tooltip show only if the file has owner.