Angular PrimeNG Tooltip Events

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 Events Properties:

• pTooltip: It represents the text in the Tooltip. It is of string type & its default value is null.
• tooltipPosition: It represents the position of the tooltip, & accepted values are right, bottom, left, & top. It is of string type & its default value is right.
• tooltipEvent: It is the event to show the tooltip. It is of string data type. It contains two valid values i.e. focus and hover. The default value is hover.
  • hover: It is one of the values of the tooltipEvent component and it activates when the user interacts with an element with a pointing device.
  • focus:  It is one of the values of the tooltipEvent component and it activates when the user taps or clicks on an element.

Syntax:

<input type="text" 
       pTooltip="...." 
       tooltipPosition="..." 
       tooltipEvent="focus">

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 implementation of tooltipEvent in Angular PrimeNG by setting its value as focus. 

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Event - focus</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="Focus here..."
               tooltipEvent="focus" />
    </div>
    <div class="p-col-12 p-md-3">
        <input type="text"
               pInputText pTooltip="It is a tooltip"
               placeholder="Focus here..."
               tooltipPosition="bottom"
               tooltipEvent="focus" />
    </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 implementation of the tooltipEvent in Angular PrimeNG by setting its value as hover.

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Event - hover</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" />
    </div>
    <div class="p-col-12 p-md-3">
        <input type="text"
               pInputText pTooltip="It is a tooltip"
               placeholder="Hover here..."
               tooltipPosition="bottom"
               tooltipEvent="hover" />
    </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