Angular MDBootstrap Tooltips组件

MDBootstrap是一个基于Material Design和bootstrap的Angular UI库，通过其无缝和易于使用的组件来制作好看的网页。在这篇文章中，我们将知道如何在Angular MDBootstap中使用Tooltips组件。工具提示用于在鼠标指针移动时向用户提供关于该元素的交互式文本提示。我们可以在任何方向使用工具提示，即顶部、右侧、底部和左侧。

重要点:

长度为零（0）的工具提示从不显示。
隐藏元素上的工具提示从未显示。
.disabled或disabled的工具提示必须是在包装元素上。
工具提示必须在元素从DOM中删除之前就被隐藏。

属性：

container：它被用来做一个选择器，指定工具提示应该被附加到的元素。
isDisabled：它用于禁用工具提示。
isOpen：它用于返回工具提示是否打开。
position。它用于显示工具提示的位置。
mdbTooltip：它用来显示你的工具提示的内容。
triggers。：它用于指定将被触发的事件。
delay：用于指定延迟，在此延迟后，工具提示将被触发。
customHeight：用于指定工具提示的高度，如果在style.scss中被覆盖了。

语法:

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

步骤:

下载 Angular MDBootstrap from: https://mdbootstrap.com/docs/angular/getting-started/installation/
提取文件并切换到工作目录。
使用以下命令在当前项目中安装npm。

npm install
or 
npm install -y

在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

使用以下命令启动服务器。

ng serve

项目结构：完成安装后，它将看起来像下面这样。

Angular MDBootstrap Tooltips组件

例子1：这是一个基本的例子，说明了如何使用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 { }

输出:

Angular MDBootstrap Tooltips组件

实例2：在这个例子中，我们将知道如何在一个按钮中添加工具提示。

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

输出:

Angular MDBootstrap Tooltips组件