Angular PrimeNG Tooltip Component - GeeksforGeeks

11 Sep, 2021
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
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
How to create module with Routing in Angular 9 ?
How to setup 404 page in angular routing ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?