Angular PrimeNG Tooltip Component

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 know how to use the Tooltip component in Angular PrimeNG. We will also learn about the properties, styling along with their syntaxes that will be used in the code. 

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

Properties:

• pTooltip: It is the text of the tooltip. It is of string data type & the default value is null.
• tooltipPosition: It is the position of the tooltip. It is of string data type & the default value is right.
• 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.

Styling:

• p-tooltip: It is the container element.
• p-tooltip-arrow: It is the arrow of the tooltip.
• p-tooltip-text: It is the text of the tooltip.

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

<h2>GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Component</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="focus"/>
  </div>
  <div class="p-col-12 p-md-3">
    <input
      type="text"
      pInputText
      pTooltip="It is a tooltip"
      placeholder="Hover Here"
      tooltipPosition="bottom"
      tooltipEvent="focus"/>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'mt-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 {}

Output:

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

app.component.html

<h2>GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Component</h5>
<div class="p-grid p-fluid">
  <div class="p-col-12 p-md-3">
    <p-button label="Hover Here" pTooltip="It is a tooltip"></p-button>
  </div>
  <div class="p-col-12 p-md-3">
    <p-button
      label="Hover Here"
      pTooltip="It is a tooltip"
      tooltipPosition="bottom">
    </p-button>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'mt-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/showcase/#/tooltip