可以利用Angular的指令和Bootstrap的工具提示组件来实现。

1.首先，安装Bootstrap和ng-bootstrap：

$ npm install bootstrap

$ npm install @ng-bootstrap/ng-bootstrap

2.导入所需的模块：

import { NgModule } from '@angular/core';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({

imports: [

NgbModule.forRoot(),

...

],

...

})

export class AppModule {}

3.在HTML文件中添加button和tooltip指令：

[placement]="'right'"

[ngbTooltip]="'This button is disabled'">

Disabled Button with Tooltip

4.在组件中添加所需的属性或方法：

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

}

5.成功实现在按钮禁用的情况下显示工具提示。

完整代码示例：

app.module.ts:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({

imports: [

BrowserModule,

NgbModule.forRoot()

],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.html:

app.component.ts:

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

}