Angular PrimeNG Tooltip 风格

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常容易。在这篇文章中，我们将看到如何在Angular PrimeNG中对工具提示组件进行造型。

工具提示组件是用来制作一个为组件提供咨询信息的元素。Tooltip Styling用于在Tooltip组件上添加样式。

Angular PrimeNG工具提示样式属性：

• p-tooltip：它是容器元素。
• p-tooltip-arrow。它是工具提示的箭头。
• p-tooltip-tex t:它是工具提示的文本。

创建Angular应用程序和模块安装。

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

步骤2：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的react项目后，进入文件夹执行不同的操作。

cd project_name

第四步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：运行上述步骤中提到的命令后，将出现以下项目结构。

Project Structure

• 运行应用程序的步骤。在项目的根目录下使用以下命令运行该应用程序

ng serve --open

示例1：下面是说明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;
}

输出:

例子2：我们正在创建一个显示工具提示样式的用户界面。

• 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;
}

输出：现在，打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。