Question

我经常搜索一个简单，最简单，最重要的Ng方法来制作工具提示，但我似乎找不到统一的方法。我尝试使用ngbToolTip按照ng-bootstrap中的文档执行此操作，但它似乎不起作用。这是我的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（）。发布您的组件TS文件。

您还可以使用Bootstrap 4 tooltip或ngx-bootstrap tooltip

Answer 2

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

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

2 个答案: