Angular PrimeNG Tooltip Scrolling Containers

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

The Tooltip Scrolling Containers can be used to add a tooltip to another element with relative positioning rather than the document body, which is the default, when it is positioned inside a scrolling container, such as an overflown div.

Syntax:

<div #geek style=
    "display:inline-block;
     position:relative">
  <input type="text" 
     pInputText pTooltip="..." 
     [appendTo]="geek">
</div>

Angular PrimeNG Tooltip Scrolling Containers properties:

• appendTo: It targets the element to which the overlay will be attached. The acceptable options are “body”, “target” or a local ng-template variable of another element.

Note: Use binding with brackets for template variables, example, [appendTo]=”geek” for a div element with #geek as variable name.

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 demonstrates the use of Scrolling Containers using value as [appendTo]=”geek”. 

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Scrolling Containers</h5>

<div class="p-grid p-fluid">
  <div #geek style="display:inline-block;
                    position:relative">
    <input
      type="text"
      pInputText
      pTooltip="Enter your name geek"
      placeholder="Enter your name geek"
      [appendTo]="geek" />
  </div>
</div>

app.component.ts

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

@Component({
  selector: "app-root",
  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: Below is another example that demonstrates the use of Scrolling Containers using positioned <div> tag. 

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tooltip Scrolling Containers</h4>
<div #gfg style="display:inline-block;
                 position:relative">
</div>
<input type="text"
       pInputText pTooltip="Enter your username"
       placeholder="Tooltip Scrolling"
       [appendTo]="gfg" />

app.component.ts

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

@Component({
  selector: "app-root",
  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