Hi Dev,

Today, i we will show you angular html content tooltip example. This article will implement a angular 12 tooltip with html content. step by step explain angular 12 tooltip with html content.

Sometime we’d like to feature tooltip with HTML content as a result of we’d like to show thereforeme text as daring or as title so, here we are going to use npm ng2-tooltip-directive package for adding tooltip with HTML content.you can use this example with in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11 and angular 12 version app.

So let’s follow few step to create example of angular html content tooltip example.

Step 1: Install New App

You can easily install angular app using bellow command:

ng new myNewApp

Step 2: Install ng2-tooltip-directive npm Package

we need to just install ng2-tooltip-directive in our angular app. so let’s using bellow command:

npm i ng2-tooltip-directive

Step 3: Import TooltipModule

import TooltipModule module as like below code:
src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { TooltipModule } from 'ng2-tooltip-directive';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TooltipModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Component Html File

we need to update Component html file as like below code:
src/app/app.component.html

<h1>Angular HTML Content Tooltip Example</h1>
  
<button placement="top" tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
  Ex 1: Tooltip with HTML content
</button>
  
<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>
  
<button [tooltip]="HtmlContent" contentType="template">
  Ex 2: Tooltip with template content
</button>

run your app by below command

ng serve

I hope it will assist you…