Angular PrimeNG Tooltip Button
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" >BeginnerforGeeeks</ h2 > < h5 >PrimeNG Tooltip Buttons</ h5 > < div class = "p-grid p-fluid" > < div class = "col-4" > < button pButton type = "button" label = "w3wiki" 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 = "w3wiki" 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" >BeginnerforGeeeks</ h2 > < h5 >PrimeNG Tooltip Buttons</ h5 > < div class = "p-grid p-fluid" > < div class = "col-4" > < button pButton type = "button" label = "w3wiki" 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 {} |
Output:
Reference: https://primefaces.org/primeng/tooltip
Contact Us