我是Angular的新手，我开始创建一个简单的页面，其中包含一些法律案件的数据。我已经导入了这个名为Angular Material的库（不确定名称），因为它提供了一些漂亮的图标，并且我需要将它们显示在我的原告和第二方名称旁边，以便用户可以快速浏览其详细信息。 >
我想要实现的是这样的：design
但是，当我从Bootstrap官方页面添加这些常用的工具提示属性时：
data-toggle="tooltip" data-placement="top" title="Tooltip on top"我在图标的右下角得到了一个普通的，白色的，无样式的工具提示（而不是元素上方的黑色）。
问题是：如何获得Bootstrap文档提供的特定效果？这是我的组件代码：
<div class="jumbotron"> <h1 class="display-4">Case: {{ caseTitle }}</h1> </div> <div class="jumbotron"> <h3>Plaintiff: {{ clientName }} <i class="material-icons" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> info </i></h3> <hr> <h5>Role: {{ clientRole }}</h5> <hr> <h5>Second party: {{ secondParty }}<i class="material-icons" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> info </i></h5> </div>这是我的组件.ts文件：
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-case-view', templateUrl: './case-view.component.html', styleUrls: ['./case-view.component.scss'] }) export class CaseViewComponent implements OnInit { caseTitle:string = "Sum cays"; clientName:string = "Cuss Tomer"; clientRole:string = "plain tiff"; secondParty:string = "Dnoces Ytrap"; constructor() { } ngOnInit() { } }我不知道是否应该在此处或其他文件中放置更多内容，但让我也提供我的index.html和app.module.ts文件：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>LFMSfront</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> <link href='http://fonts.googleapis.com/css?family=Literata&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> </head> <body> <app-root></app-root> <script src="../node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script> </body> </html>import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CaseViewComponent } from './case-view/case-view.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent, CaseViewComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }谢谢你！如果您需要任何其他信息，我会尽快提供。
我是Angular的新手，我开始创建一个简单的页面，其中包含一些法律案件的数据。我已经导入了这个名为Angular Material的库（不确定名称），因为它...
您可以改用Angular Material Tooltip。这是一个工作示例：