Angular ng bootstrap Tooltip组件

Angular ng bootstrap是一个与angular一起使用的bootstrap框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。在这篇文章中，我们将了解如何在Angular ng bootstrap中使用Tooltip。

工具提示用于在用户悬停、关注或点击某个元素时显示信息性文本。

安装:

ng add @ng-bootstrap/ng-bootstrap

步骤:

• 首先，使用上述命令安装angular ng bootstrap。

• 在index.html中添加以下脚本

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”stylesheet”>

• 在module.ts中导入ng bootstrap模块

> import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; 
> 
> imports: [   
>  NgbModule   
>  ] 

• 在app.component.html中制作一个tooltip组件。
• 使用ng serve为应用程序提供服务。

例子1：在这个例子中，我们要做一个工具提示的基本例子。

<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
}

输出:

例子2：在这个例子中，我们要做一个带头的祝酒词。

<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
}

输出: