title: Tooltip not working inside a tag with ngFor attribute
body: <p>Could someone explain to me why the tooltip in this piece of code using Angular 4 templates doesn't work?</p>
  
  <pre><code>&lt;template ngFor let-channel [ngForOf]="channels"&gt;
    &lt;td&gt;
      &lt;em *ngFor="let color of findBallsColor()" class="fa fa-circle {{ color }}" [tooltip]="id"&gt;&lt;/em&gt;
    &lt;/td&gt;
  &lt;/template&gt;
  &lt;ng-template #id&gt;
    test
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>If I remove the <code>*ngFor</code> inside the <code>&lt;em&gt;</code> tag it works fine (showing just one element obviously). I'm quite new to Angular so probably I'm missing some understanding of how it really works here.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I found out the problem comes from the type returned from the Typescript function. In the code above, the list returned by <code>findBallsColor()</code> is actually an object that contains 4 fields. When I change it to just return a string it works. So the code looks similar to this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;template ngFor let-channel [ngForOf]="channels"&gt;
    &lt;td&gt;
      &lt;em *ngFor="let color of findBallsColor()" class="fa fa-circle {{ status.color }}" [tooltip]="id"&gt;&lt;/em&gt;
    &lt;/td&gt;
  &lt;/template&gt;
  &lt;ng-template #id&gt;
    test
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>findBallsColor():any[] {
    return [{"statut":"ERROR","name":"name","otherField":"value","anotherField":"value"}];
  }
  </code></pre>
  
  <p>Does anyone know the why of this behaviour?</p>