Angular PrimeNG Tooltip Button

Last Updated : 10 Aug, 2022

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Tooltip Button in Angular PrimeNG.

Angular PrimeNG Tooltip Button is used to make a tooltip around a button that provides advisory information about it.

Syntax:

<button
    pButton
    type="button"
    label="..."
    tooltipPosition="..."
    pTooltip="...">
</button>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Project Structure

Example 1: Below is the example that demonstrates the use of the Angular PrimeNG Tooltip Button using the top and bottom tooltip positions.

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2> 
<h5>PrimeNG Tooltip Buttons</h5> 
<div class="p-grid p-fluid"> 
  <div class="col-4"> 
    <button
      pButton 
      type="button"
      label="GeeksforGeeks"
      tooltipPosition="top"
      icon="pi pi-code"
      pTooltip="Click here to copy the code"> 
    </button> 
  </div> 
  
  <div class="col-4 ml-3"> 
    <button
      pButton 
      type="button"
      label="GeeksforGeeks"
      tooltipPosition="bottom"
      icon="pi pi-code"
      pTooltip="Click here to copy the code"> 
    </button> 
  </div> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent {}

app.module.ts

import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { BrowserAnimationsModule }  
    from "@angular/platform-browser/animations"; 
  
import { AppComponent } from "./app.component"; 
import { TooltipModule } from "primeng/tooltip"; 
import { InputTextModule } from "primeng/inputtext"; 
import { ButtonModule } from "primeng/button"; 
  
@NgModule({ 
  imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    TooltipModule, 
    InputTextModule, 
    ButtonModule, 
  ], 
  declarations: [AppComponent], 
  bootstrap: [AppComponent], 
}) 
export class AppModule {}

Run the below command:

ng serve --open

Output:

Example 2: Below is another example that demonstrates the use of Angular PrimeNG Tooltip Buttons using the right tooltip position.

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2> 
<h5>PrimeNG Tooltip Buttons</h5> 
<div class="p-grid p-fluid"> 
  <div class="col-4"> 
    <button
      pButton 
      type="button"
      label="GeeksforGeeks"
      tooltipPosition="right"
      icon="pi pi-check"
      pTooltip="Success! your code was copied"> 
    </button> 
  </div> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
selector: 'my-app', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent {}

app.module.ts

import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { BrowserAnimationsModule }  
    from "@angular/platform-browser/animations"; 
  
import { AppComponent } from "./app.component"; 
import { TooltipModule } from "primeng/tooltip"; 
import { InputTextModule } from "primeng/inputtext"; 
import { ButtonModule } from "primeng/button"; 
  
@NgModule({ 
  imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    TooltipModule, 
    InputTextModule, 
    ButtonModule, 
  ], 
  declarations: [AppComponent], 
  bootstrap: [AppComponent], 
}) 
export class AppModule {}