Open In App

Angular PrimeNG Tooltip Delay

Improve
Improve
Like Article
Like
Save
Share
Report

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 events in Angular PrimeNG. 

Angular PrimeNG Tooltip Delay is used to show or hide tooltips quickly by default, but you may add delays using the showDelay and hideDelay parameters, which accept a millisecond-based numeric value.

Syntax:

<input type="text" 
       pTooltip="....." 
       tooltipPosition="..." 
       tooltipEvent="..." 
       showDelay="..." 
       hideDelay="...">

Angular PrimeNG Tooltip Delay properties: 

  • showDelay: It delays in milliseconds for the tooltip to disappear. 
  • hideDelay: It sets a millisecond delay before the tooltip appears.

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:

 

Example 1: Below is the example that demonstrates the use of tooltipDelay by setting the value of showDelay

app.component.html




<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Delay - showDelay</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Hover here..." 
               tooltipEvent="hover" 
               showDelay="2000" />
    </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";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TooltipModule,
    InputTextModule,
  ],
  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 tooltipDelay by setting the value of hideDelay

app.component.html




<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Delay - hideDelay</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Hover here..." 
               tooltipEvent="hover" 
               hideDelay="1000" /> 
    </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";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TooltipModule,
    InputTextModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}


Run the below command:

ng serve --open

Output:

 

Reference: https://primefaces.org/primeng/tooltip



Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads