Angular PrimeNG Tooltip Properties

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 properties along with code examples in Angular PrimeNG.

Tooltip component is used to make an element that provides advisory information for a component.

Angular PrimeNG Tooltip Properties:

• pTooltip: It is the text of the tooltip. It is of string data type & the default value is null.
• tooltipPosition: It defines the position of the tooltip. It is of string data type & the default value is right.
• fitContent: It is used to resize the element position automatically when not enough space is available in the selected position. It is of boolean type & its default value is true.
• tooltipEvent: It is the event to show the tooltip. It is of string data type & the default value is hover.
• positionStyle: It is the text representing the type of CSS position. It is of string data type & the default value is absolute.
• tooltipDisabled: It is used to specify whether the component should be disabled. It is of boolean data type & the default value is false.
• appendTo: It is used to specify the target element to attach the overlay. It is of string data type & the default value is any.
• hideDelay: It is the delay to hide the tooltip in milliseconds. It is of number data type & the default value is null.
• showDelay: It is the delay to show the tooltip in milliseconds. It is of number data type & the default value is null.
• life: It is the time to wait in milliseconds to hide the tooltip even it is active. It is of number data type & the default value is null.
• tooltipStyleClass: It is the style class of the tooltip. It is of string data type & the default value is null.
• escape: it is used to specify whether the content is rendered as text. It is of boolean data type & the default value is true.
• tooltipZIndex: It is used to specify whether the z-index should be managed automatically. It is of string data type & the default value is auto.

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

• Run the below command:

ng serve --open

Example 1: Below is the example that illustrates the use of Tooltip positions in Angular PrimeNG.

app.component.html

<div style="text-align : center">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>PrimeNG Tooltip Properties</h5>
  <input type="text"
         pInputText pTooltip="Course 1"
         tooltipPosition="top"
         placeholder="Geek 1" />
  <input type="text"
         pInputText pTooltip="Course 2"
         tooltipPosition="bottom"
         placeholder="Geek 2" />
  <input type="text"
         pInputText pTooltip="Course 3"
         tooltipPosition="right"
         placeholder="Geek 3" />
</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 { ButtonModule } from "primeng/button";

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

Output:

Example 2: This is the basic example that illustrates how to implement a focus event to display and blur to hide in the Tooltip component.

app.component.html

<div style="text-align : center">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>PrimeNG Tooltip Properties</h5>

  <input type="text"
         pInputText pTooltip="Course 1"
         tooltipPosition="top"
         placeholder="Geek 1"
         tooltipEvent="focus" />

  <input type="text"
         pInputText pTooltip="Course 2"
         tooltipPosition="bottom"
         placeholder="Geek 2"
         tooltipEvent="focus" />

  <input type="text"
         pInputText pTooltip="Course 3"
         tooltipPosition="right"
         placeholder="Geek 3"
         tooltipEvent="focus" />
</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 { ButtonModule } from "primeng/button";
import { InputTextModule } from "primeng/inputtext";

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

Output:

Example 3: In this example, we are going to use the tooltip component in a button.

app.component.html

<div style="text-align : center">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>PrimeNG Tooltip Properties</h5>
  <p-button pTooltip="Course 1"
            tooltipPosition="top"
            label="Geek 1"
            class="p-mr-2">
  </p-button>
  <p-button pTooltip="Course 2"
            tooltipPosition="bottom"
            label="Geek 2"
            class="p-mr-2">
  </p-button>
  <p-button pTooltip="Course 3"
            tooltipPosition="right"
            label="Geek 3"
            class="p-mr-2">
  </p-button>
</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 { ButtonModule } from "primeng/button";

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

Output:

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