События всплывающей подсказки Angular PrimeNG

Опубликовано: 2 Января, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать события всплывающей подсказки в Angular PrimeNG.

Свойства событий всплывающей подсказки Angular PrimeNG:

pTooltip : Представляет текст во всплывающей подсказке. Он имеет строковый тип, и его значение по умолчанию равно null.
tooltipPosition : представляет положение всплывающей подсказки, допустимые значения: справа, снизу, слева и сверху. Это строковый тип, и его значение по умолчанию правильное.
tooltipEvent: это событие для отображения всплывающей подсказки. Это строковый тип данных. Он содержит два допустимых значения, т. е. focus и hover. Значение по умолчанию — наведение.
- hover: это одно из значений компонента tooltipEvent, которое активируется, когда пользователь взаимодействует с элементом с помощью указывающего устройства.
- focus: это одно из значений компонента tooltipEvent, которое активируется, когда пользователь касается или щелкает элемент.

Синтаксис:

<input type="text" 
       pTooltip="...." 
       tooltipPosition="..." 
       tooltipEvent="focus">

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта : это будет выглядеть следующим образом:

Пример 1: Ниже приведен пример, который демонстрирует реализацию tooltipEvent в Angular PrimeNG, установив его значение как focus .

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Event - focus</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Focus here..." 
               tooltipEvent="focus" />
    </div>
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Focus here..." 
               tooltipPosition="bottom" 
               tooltipEvent="focus" /> 
    </div>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  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 {}

Запустите следующую команду:

ng serve --open

Выход:

Пример 2: Ниже приведен еще один пример, который демонстрирует реализацию tooltipEvent в Angular PrimeNG, установив его значение как hover .

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Event - hover</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Hover here..." 
               tooltipEvent="hover" />
    </div>
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Hover here..." 
               tooltipPosition="bottom"
               tooltipEvent="hover" /> 
    </div>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  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 {}

Запустите следующую команду:

ng serve --open

Выход:

Ссылка: https://primefaces.org/primeng/tooltip

Picked AngularJS

События всплывающей подсказки Angular PrimeNG

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ