Componente de información sobre herramientas de Angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente Tooltip en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente de información sobre herramientas: se utiliza para crear un elemento que proporciona información de asesoramiento para un componente.

Propiedades:

• pTooltip: Es el texto del tooltip. Es de tipo de datos de string y el valor predeterminado es nulo.
• tooltipPosition: Es la posición del tooltip. Es del tipo de datos de string y el valor predeterminado es correcto.
• tooltipEvent: Es el evento para mostrar el tooltip. Es del tipo de datos de string y el valor predeterminado es hover.
• positionStyle: Es el texto que representa el tipo de posición CSS. Es del tipo de datos de string y el valor predeterminado es absoluto.
• tooltipDisabled: Se utiliza para especificar si el componente debe ser deshabilitado. Es de tipo de datos booleano y el valor predeterminado es falso.
• appendTo: se utiliza para especificar el elemento de destino para adjuntar la superposición. Es del tipo de datos de string y el valor predeterminado es cualquiera.
• hideDelay: es el retraso para ocultar la información sobre herramientas en milisegundos. Es de tipo de datos de número y el valor predeterminado es nulo.
• showDelay: es el retraso para mostrar la información sobre herramientas en milisegundos. Es de tipo de datos de número y el valor predeterminado es nulo.
• life: es el momento de esperar en milisegundos para ocultar la información sobre herramientas, incluso si está activa. Es de tipo de datos de número y el valor predeterminado es nulo.
• tooltipStyleClass: Es la clase de estilo del tooltip. Es de tipo de datos de string y el valor predeterminado es nulo.
• escape: se utiliza para especificar si el contenido se representa como texto. Es de tipo de datos booleano y el valor predeterminado es verdadero.
• tooltipZIndex: Se utiliza para especificar si el z-index debe administrarse automáticamente. Es del tipo de datos de string y el valor predeterminado es automático.

Estilo:

• p-tooltip: Es el elemento contenedor.
• p-tooltip-arrow: Es la flecha del tooltip.
• p-tooltip-text: Es el texto del tooltip.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo implementar un evento de enfoque para mostrar y desenfocar para ocultar en el componente Tooltip.

<h2>GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Component</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="focus"/>
  </div>
  <div class="p-col-12 p-md-3">
    <input
      type="text"
      pInputText
      pTooltip="It is a tooltip"
      placeholder="Hover Here"
      tooltipPosition="bottom"
      tooltipEvent="focus"/>
  </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'mt-app',
  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 { TooltipModule } from "primeng/tooltip";
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TooltipModule,
    InputTextModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, vamos a utilizar el componente de información sobre herramientas en un botón.

<h2>GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Component</h5>
<div class="p-grid p-fluid">
  <div class="p-col-12 p-md-3">
    <p-button label="Hover Here" pTooltip="It is a tooltip"></p-button>
  </div>
  <div class="p-col-12 p-md-3">
    <p-button
      label="Hover Here"
      pTooltip="It is a tooltip"
      tooltipPosition="bottom">
    </p-button>
  </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'mt-app',
  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 { TooltipModule } from "primeng/tooltip";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TooltipModule,
    ButtonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/tooltip