Angular PrimeNG Tooltip Positions

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 Positions in Angular PrimeNG.

Angular PrimeNG Tooltip Positions Property:

• tooltipPosition: It is the position of the tooltip. It is of string data type & the default value is right.

Angular PrimeNG Tooltip Positions Property values:

• top: It is used to display the tooltip to the top position of the element.
• bottom: It is used to display the tooltip to the bottom position of the element.
• left: It is used to display the tooltip to the left position of the element.
• right: It is used to display the tooltip to the right position of the element.

Syntax:

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

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 demonstrates the use of Angular PrimeNG Tooltip Positions using top and bottom positions.

app.component.html

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

Example 2: Below is another example that demonstrates the use of Angular PrimeNG Tooltip Positions using the right positions,

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Positions - right</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text"
               pInputText pTooltip="It is a bottom tooltip"
               placeholder="Focus here..."
               tooltipPosition="right"
               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 {}

Output:

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