Componente de información sobre herramientas de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente Tooltips en Angular MDBootstap. La información sobre herramientas se utiliza para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse. podemos utilizar la información sobre herramientas en cualquier dirección, es decir, arriba, derecha, abajo, izquierda. 

Puntos importantes:

• La información sobre herramientas de longitud cero (0) nunca se muestra.
• La información sobre herramientas en el elemento oculto nunca se muestra. 
• La información sobre herramientas para .disableddisabled debe estar en el elemento contenedor.
• La información sobre herramientas debe ocultarse antes de que los elementos se eliminen del DOM. 

Propiedades:

• contenedor: se utiliza para hacer un selector que especifica el elemento al que se debe agregar la información sobre herramientas.
• isDisabled: se utiliza para deshabilitar la información sobre herramientas.
• isOpen: solía devolver si la información sobre herramientas está abierta o no.
• colocación: solía mostrar la colocación de una información sobre herramientas.
• mdbTooltip: solía mostrar el contenido de su información sobre herramientas.
• disparadores: se utiliza para especificar los eventos que serán disparados.
• retraso: se utiliza para especificar el retraso después del cual se activará la información sobre herramientas.
• customHeight: se usa para especificar la altura de la información sobre herramientas si se sobrescribió en styles.scss.

Sintaxis:

<button mdbTooltip="Top">Top</button>

Acercarse:

• Descargue Angular MDBootstrap desde: https://mdbootstrap.com/docs/angular/getting-started/installation/
• Extraiga los archivos y cambie al directorio de trabajo.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install
or 
npm install -y

• 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

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Tooltips.

<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Tooltips Component</h4>
  <br />
  <a mdbTooltip="GeeksforGeeks" placement="top">Hover Here</a>
</div>

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Producción:

Ejemplo 2: en este ejemplo, conoceremos información sobre herramientas para agregar en caliente en un botón

<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Tooltips Component</h4>
  <br />
  <button type="button" mdbBtn color="info" 
    class="bwaves-light" mdbTooltip="Tooltip on top" 
    placement="top" mdbWavesEffect>
    Top
  </button>
  
  <button type="button" mdbBtn color="danger" 
    class="waves-light" mdbTooltip="Tooltip on right"
    placement="right" mdbWavesEffect>
    Right
  </button>
  
  <button type="button" mdbBtn color="warning"
    class="waves-light" mdbTooltip="Tooltip on bottom"
    placement="bottom" mdbWavesEffect>
    Bottom
  </button>
  
  <button type="button" mdbBtn color="success" 
    class="waves-light" mdbTooltip="Tooltip on left"
    placement="left" mdbWavesEffect>
    Left
  </button>
</div>

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Producción:

Referencia: https://mdbootstrap.com/docs/angular/advanced/tooltips/