title: How do I create working tooltips in Angular2 with Angular techniques?
body: <p>I've searched a lot for an easy, simple, and most importantly Ng way to make tooltips, but I can't seem to find a uniform method for doing so. I've tried doing this using ngbToolTip following the documentation in ng-bootstrap, but it doesn't seem to work. Here is my HTML: </p>
  
  <pre><code> &lt;div class="checkboxes" *ngFor="let to of todo"&gt;
      &lt;label id="checkbox-label"&gt;
          &lt;!--&lt;input *ngIf="to.importance != 'non'" type="checkbox" id="{{to.id}}checker"  name="ChecklistItem{{to.name}}" value={{to.name}}&gt;--&gt;
          &lt;!--&lt;span *ngIf="to.importance == 'non'" class="glyphicon glyphicon-ok completed-check" aria-hidden="true"&gt;&lt;/span&gt;--&gt;
          &lt;div class="displayed-info"&gt;
              &lt;div class="importance-change"&gt;
                  &lt;div id="red-block" (click)="changeToHigh(to.id)"&gt;
                  &lt;/div&gt;
                  &lt;div id="green-block" (click)="changeToMed(to.id)"&gt;
                  &lt;/div&gt;
                  &lt;div id="beige-block" (click)="changeToMeh(to.id)"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;p *ngIf="to.importance == 'high'" class="todo-item highimportance"&gt;{{to.name}} should be done {{to.time}}&lt;/p&gt;
              &lt;p *ngIf="to.importance == 'medium'" class="todo-item mediumimportance"&gt;{{to.name}} should be done {{to.time}}&lt;/p&gt;
              &lt;p *ngIf="to.importance == 'meh'" class="todo-item mehimportance"&gt;{{to.name}} should be done {{to.time}}&lt;/p&gt;
              &lt;span *ngIf="to.importance == 'non'" class="glyphicon glyphicon-ok completed-check" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;div *ngIf="to.importance == 'non'" class="todo-item nonimportance"&gt;
                  &lt;p&gt;{{to.name}} &lt;/p&gt;
              &lt;/div&gt;
              &lt;span *ngIf="to.importance == 'non'" class="completed-task"&gt; Completed!&lt;/span&gt;
          &lt;/div&gt;
      &lt;/label&gt;
      &lt;button class="btn btn-warning chkbx" (click)="onDelete(to.id)" ngbTooltip="tooltip"&gt;
          &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;button *ngIf="to.importance != 'non'" class="btn btn-info chkbx" (click)="onCompleted(to.id)"&gt;
          &lt;span class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;button *ngIf="to.importance == 'non'" class="btn btn-info chkbx" disabled="true" (click)="onCompleted(to.id)"&gt;
          &lt;span class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I'm just adding one little tooltip on my delete button as a test, but it doesn't work.</p>
  
  <p>Here is my app.module:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>My single component has the same import at the top of the .ts file too.</p>
  
  <p>The html itself needs cleanup too I know, but I'm not there yet.</p>
  
  <p>Any suggestions on how to setup tooltips, or anywhere there is documentation?</p>