如何使用 Angular 技术在 Angular2 中创建工作工具提示？

Question

我搜索了很多方法来寻找一种简单、简单且最重要的 Ng 方法来制作工具提示，但我似乎无法找到一种统一的方法。我已经尝试按照 ng-bootstrap 中的文档使用 ngbToolTip 执行此操作，但它似乎不起作用。这是我的 HTML：

 <div class="checkboxes" *ngFor="let to of todo">
    <label id="checkbox-label">
        <!--<input *ngIf="to.importance != 'non'" type="checkbox" id="{{to.id}}checker"  name="ChecklistItem{{to.name}}" value={{to.name}}>-->
        <!--<span *ngIf="to.importance == 'non'" class="glyphicon glyphicon-ok completed-check" aria-hidden="true"></span>-->
        <div class="displayed-info">
            <div class="importance-change">
                <div id="red-block" (click)="changeToHigh(to.id)">
                </div>
                <div id="green-block" (click)="changeToMed(to.id)">
                </div>
                <div id="beige-block" (click)="changeToMeh(to.id)">
                </div>
            </div>
            <p *ngIf="to.importance == 'high'" class="todo-item highimportance">{{to.name}} should be done {{to.time}}</p>
            <p *ngIf="to.importance == 'medium'" class="todo-item mediumimportance">{{to.name}} should be done {{to.time}}</p>
            <p *ngIf="to.importance == 'meh'" class="todo-item mehimportance">{{to.name}} should be done {{to.time}}</p>
            <span *ngIf="to.importance == 'non'" class="glyphicon glyphicon-ok completed-check" aria-hidden="true"></span>
            <div *ngIf="to.importance == 'non'" class="todo-item nonimportance">
                <p>{{to.name}} </p>
            </div>
            <span *ngIf="to.importance == 'non'" class="completed-task"> Completed!</span>
        </div>
    </label>
    <button class="btn btn-warning chkbx" (click)="onDelete(to.id)" ngbTooltip="tooltip">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <button *ngIf="to.importance != 'non'" class="btn btn-info chkbx" (click)="onCompleted(to.id)">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    </button>
    <button *ngIf="to.importance == 'non'" class="btn btn-info chkbx" disabled="true" (click)="onCompleted(to.id)">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    </button>
</div>

所以我只是在我的删除按钮上添加了一个小工具提示作为测试，但它不起作用。

这是我的 app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {TodoService } from './todo.service';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    NgbModule.forRoot()
  ],
  providers: [TodoService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的单个组件在 .ts 文件的顶部也有相同的导入。

我知道 html 本身也需要清理，但我还没到那里。

关于如何设置工具提示或任何有文档的任何建议？

Answer 1

你在使用 SystemJS 吗？如果你有，也从你的组件中删除 NgbModule.forRoot() 。 Post 你的组件 TS 文件。

您也可以使用 Bootstrap 4 tooltip or ngx-bootstrap tooltip

Answer 2

https://ng-bootstrap.github.io/#/components/tooltip 处的代码和演示在我运行或将类似代码合并到其他程序中时有效。我发现的唯一问题是工具提示会立即出现，没有明显的添加延迟的方法。

如何使用 Angular 技术在 Angular2 中创建工作工具提示？

How do I create working tooltips in Angular2 with Angular techniques?

angular-ui-bootstrap

angular