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:
- 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
< 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
import { Component, VERSION } from '@angular/core' ;
@Component({ selector: 'my-app' ,
templateUrl: './app.component.html' ,
}) export class AppComponent { } |
- app.module.ts
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
.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
< 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
import { Component, VERSION } from '@angular/core' ;
@Component({ selector: 'my-app' ,
templateUrl: './app.component.html' ,
}) export class AppComponent { } |
- app.module.ts
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
.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