Question

我是Angular的新手，我开始创建一个简单的页面，其中包含一些法律案件的数据。我已经导入了这个名为Angular Material的库（不确定名称），因为它提供了一些漂亮的图标，并且我需要将它们显示在我的原告和第二方名称旁边，以便用户可以快速浏览其详细信息。 / p>

我想要实现的是这样的： 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 { }

Answer 1

您可以改用Angular Material Tooltip。这是一个工作示例：

HTML文件

<div class="jumbotron">
    <h1 class="display-4">Case: {{ caseTitle }}</h1>
</div>
<div class="jumbotron">
    <h3>Plaintiff: {{ clientName }} <i class="material-icons"  matTooltip="Tooltip information" [matTooltipPosition]="'after'">
        info
        </i></h3>
    <hr>
    <h5>Role: {{ clientRole }}</h5>
    <hr>
    <h5>Second party: {{ secondParty }}<i class="material-icons" matTooltip="Tooltip information" [matTooltipPosition]="'after'">
        info
        </i></h5>
</div>

app.module.ts文件

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';
import {MatTooltipModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    CaseViewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您的component.ts和index.html文件保持不变。

您可以检查this link，在其中可以找到有关如何将其集成到应用程序中以及在需要时对其进行自定义的更多示例。

在基于Angular的项目中向按钮添加弹出窗口

1 个答案: