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

Question

I am new to Angular and I started creating a simple page, that contains data of some legal case.我是 Angular 的新手，我开始创建一个简单的页面，其中包含一些法律案例的数据。 I have imported this library (not sure about the nomenclature) called Angular Material, because it offered some nice icons and I needed them to be displayed next to my plaintiff and second party names, so the user can have a swift peek their details.我已经导入了这个名为 Angular Material 的库（不确定命名法），因为它提供了一些不错的图标，我需要将它们显示在我的原告和第二方名称旁边，以便用户可以快速查看他们的详细信息。

What I want to achieve is something like this: design我想要实现的是这样的：设计

But instead, when I add these usual tooltip attributes from official Bootstrap page:但是，当我从官方 Bootstrap 页面添加这些常用的工具提示属性时：

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

I get a plain, white, non-styled tooltip at the right bottom corner of my icon (instead of black one above the element).我在图标的右下角看到一个普通的、白色的、无样式的工具提示（而不是元素上方的黑色）。

The question is: what can I do to get this specific effect presented by Bootstrap documentation?问题是：我该怎么做才能获得 Bootstrap 文档提供的这种特定效果？ Here is my component code:这是我的组件代码：

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

And here's my component .ts file:这是我的组件 .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() {
  } 

}

I have no idea if there's something more I should place here or in some other file, but let me also present my index.html and app.module.ts files:我不知道是否应该在此处或其他文件中放置更多内容，但让我也介绍一下我的 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

You can use The Angular Material Tooltip instead.您可以改用 Angular Material Tooltip。 Here is a working example:这是一个工作示例：

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

your component.ts and index.html files remain the same.您的 component.ts 和 index.html 文件保持不变。

You can check this link in which you will find more examples about how you can integrate it in your application and customize it if needed.您可以查看此链接，在该链接中您将找到更多有关如何将其集成到您的应用程序中并在需要时对其进行自定义的示例。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-22 11:21:05

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-22 11:21:05

解决方案1
0 已采纳 2019-12-22 11:21:05