Angular PrimeNG Tooltip Styling

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 style the Tooltip Component in Angular PrimeNG.

The Tooltip component is used to make an element that provides advisory information for a component. The Tooltip Styling is used to add styles on the Tooltip component.

Angular PrimeNG Tooltip Styling Property:

• 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: To create an angular app, you need to install the angular command line interface through the npm command.

npm install -g angular-cli

Step 2: Now we will create an angular project.

ng new project_name

Step 3: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 4: After creating the Angular application, Install the required module using the following command:

npm install primeng --save
npm install primeicons --save

Project Structure: After running the commands mentioned in the above steps, the following project structure will appear:

Project Structure

• Step to Run Application: Run the application using the following command from the root directory of the project

ng serve --open

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

• app.component.html

HTML

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Tooltip Styling</h3>
    <div class="p-col-12 p-md-3">
        <button pButton type="button"
                class="p-button-text p-button-raised "
                label="Hover Here"
                pTooltip="Hi Geek !!"
                tooltipPosition="bottom">
        </button>
    </div>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TooltipModule } from "primeng/tooltip";
import { ButtonModule } from "primeng/button";

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

• styles.css

CSS

.p-tooltip-text {
    font: 2em sans-serif;
}

.p-tooltip .p-tooltip-text {
    background-color: aliceblue !important;
    color: green !important;
}

Output:

Example 2: We are creating a UI that shows Tooltip Styling.

• app.component.html

HTML

<div style="margin:100px;
            text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Tooltip Styling</h3>
    <div class="p-col-12 p-md-3">
        <button pButton type="button"
                class="p-button-raised
                       p-button-rounded
                       p-button-success"
                label="DSA Self Paced Course"
                pTooltip="Most popular course on DSA
                          trusted by over 75,000 students!
                          Built with years of experience by
                          industry experts and gives you a complete
                          package of video lectures, practice
                          problems, quizzes, discussion forums and
                          contests. Start Today!"
                tooltipPosition="bottom">
        </button>
    </div>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TooltipModule } from "primeng/tooltip";
import { ButtonModule } from "primeng/button";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        TooltipModule,
        ButtonModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• styles.css

CSS

.p-tooltip .p-tooltip-text {
    background-color: aliceblue !important;
    color: green !important;
    font-size: large;
}

Output: Now, open your browser and go to http://localhost:3000/, you will see the following output:

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