Componente de información sobre herramientas de bootstrap angular ng

Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos. En este artículo, sabremos cómo usar Tooltip en angular ng bootstrap.

La información sobre herramientas se utiliza para mostrar texto informativo cuando los usuarios se desplazan, se enfocan o tocan un elemento.

Sintaxis de instalación:

ng add @ng-bootstrap/ng-bootstrap

Acercarse:

• Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.

 

• Agregue el siguiente script en index.html
  

  <enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>

• Importe el módulo de arranque ng en module.ts
  

  importar {NgbModule} desde ‘@ng-bootstrap/ng-bootstrap’;

  importaciones: [
  NgbModule
  ]

• En app.component.html crea un componente de información sobre herramientas.
• Sirve la aplicación usando ng serve.

Ejemplo 1: En este ejemplo, estamos haciendo un ejemplo básico de la información sobre herramientas.

<div id='geeks'>
      
    <br /><br /><br />
  
    <button type="button" 
        class="btn btn-primary" 
        placement="top" 
        ngbTooltip="GeeksforGeeks">
        top
    </button>
    <hr>
  
    <button type="button" 
        class="btn btn-success" 
        placement="right" 
        ngbTooltip="GeeksforGeeks">
        right
    </button>
    <hr>
  
    <button type="button" 
        class="btn btn-warning" 
        placement="bottom" 
        ngbTooltip="GeeksforGeeks">
        bottom
    </button>
  
    <br /><br /><br />
    <hr>
  
    <button id='gfg' type="button" 
        class="btn btn-danger" 
        placement="left" 
        ngbTooltip="GeeksforGeeks">
        left
    </button>
</div>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
  
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        FormsModule,
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        NgbModule
  
    ]
})
export class AppModule { }

#gfg {
    margin-left:120px
}
#geeks {
    margin-left:40px
}

Producción:

Ejemplo 2: En este ejemplo, estamos haciendo un brindis con un encabezado.

<div id='geeks'>
    <br /><br /><br />
  
    <button type="button" 
        class="btn btn-primary" 
        [disabled]='true' 
        placement="top" 
        ngbTooltip="GeeksforGeeks">
        top
    </button>
    <hr>
  
    <button type="button" 
        class="btn btn-success" 
        [disabled]='true' 
        placement="right" 
        ngbTooltip="GeeksforGeeks">
        right
    </button>
    <hr>
  
    <button type="button" 
        class="btn btn-warning" 
        [disabled]='true' 
        placement="bottom" 
        ngbTooltip="GeeksforGeeks">
        bottom
    </button>
  
    <br /><br /><br />
    <hr>
  
    <button id='gfg' type="button" 
        class="btn btn-danger" 
        [disabled]='true'
        placement="left" 
        ngbTooltip="GeeksforGeeks">
        left
    </button>
</div>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
  
  
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        FormsModule,
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        NgbModule
  
    ]
})
export class AppModule { }

#gfg {
    margin-left:120px
}
#geeks {
    margin-left:40px
}

Producción:

Referencia: https://ng-bootstrap.github.io/#/components/typeahead/examples