Angular PrimeNG TabView Tooltips

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用TabView Tooltips。我们还将学习属性、事件和造型，以及代码中使用的语法。

TabView组件用于以标签的形式显示内容。

Angular PrimeNG TabView Tooltips 属性：

• header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
• tooltip: 它指定了悬停时显示在工具提示中的咨询信息。它接受任何数据类型，默认值为空。

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

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：它将看起来像以下内容

运行以下命令以查看输出。

ng serve --open

例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG TabView Tooltip。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Tooltip</h5>
  
<p-tabView>
   <p-tabPanel header="Geek 1" tooltip="geek 1">
     <p>
       Welcome geek 1 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.
     </p>
   </p-tabPanel>
  
   <p-tabPanel header="Geek 2" tooltip="geek 2">
     <p>
       Welcome geek 2 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.
     </p>
   </p-tabPanel>
</p-tabView>

import { Component, OnInit, ViewEncapsulation } 
    from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
  
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TabViewModule } from 'primeng/tabview';
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   TabViewModule,
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

实例2：这是另一个例子，说明了如何使用Angular PrimeNG TabView Tooltip，使用内容作为图像。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Tooltip</h5>
  
<p-tabView>
   <p-tabPanel header="Geek 1" tooltip="geek 1">
     <p>
       <img alt="gfg" src=
  "https://media.geeksforgeeks.org/wp-content/uploads/20220228120243/gfglogo.png">
     </p>
   </p-tabPanel>
    
   <p-tabPanel header="Geek 2" tooltip="geek 1">
     <p>
       <img alt="gfg" src=
  "https://media.geeksforgeeks.org/wp-content/uploads/20220303124953/gfglogo1.png">
     </p>
   </p-tabPanel>
</p-tabView>

import { Component, OnInit, ViewEncapsulation } 
    from '@angular/core';
  
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
})
  
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TabViewModule } from 'primeng/tabview';
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   TabViewModule,
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
})
  
export class AppModule {}

输出: