Angular PrimeNG Tooltip Focus and Blur

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 Focus and Blur in Angular PrimeNG.

Angular PrimeNG Tooltip Focus and Blur are used to display a tooltip around the target element when the focus event is triggered and it disappears when the blur event is triggered.

Syntax:

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

Angular PrimeNG Tooltip Focus and Blur Properties:

• tooltipEvent: It is the event to show the tooltip. It is of string data type. It contains two valid values i.e. focus and hovers. The default value is hover.
• hover: It is one of the values of tooltipEvent component and it activates when the user interacts with an element with a pointing device.
• focus:  It is one of the values of tooltipEvent component and it activates when the user taps or clicks on an element.

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 illustrates the use of Angular PrimeNG Tooltip Focus and Blur using tooltipEvent=”focus” and tooltipPosition=”bottom”. 

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Focus and Blur</h5>
<div class="p-grid p-fluid">
    <div class="col-4">
        <input type="text"
               pInputText pTooltip="Please enter your name geek!"
               placeholder="Hello geeks.."
               tooltipEvent="focus"
               tooltipPosition="bottom" />
    </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 the example that illustrates the use of Angular PrimeNG Tooltip Focus and Blur using tooltipEvent=”focus” and tooltipPosition=”left”. 

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Focus and Blur</h5>
<div class="p-grid p-fluid">
    <div class="col-4">
        <p-tag severity="success"
               styleClass="mr-3"
               value="Click the button to delete account">
        </p-tag>
    </div>
    <div class="col-4">
        <button pButton pRipple type="button"
                icon="pi pi-times"
                pTooltip="Success! Your account was deleted."
                tooltipEvent="focus"
                tooltipPosition="left"
                class="p-button-rounded p-button-danger p-button-outlined">
        </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 { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { TooltipModule } from "primeng/tooltip";
import { ButtonModule } from "primeng/button";
import { InputTextModule } from "primeng/inputtext";
import { TagModule } from "primeng/tag";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TooltipModule,
    ButtonModule,
    InputTextModule,
    TagModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

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