Angular PrimeNG Tooltip Delay

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