title: Is there a way to use ngx-ui tooltip with ngFor in angular2/4? (angular2 tooltip libraries appear to all have problems, need expert help)
body: <p>I want to use a tooltip here:
  <a href="https://github.com/swimlane/ngx-ui" rel="nofollow noreferrer">https://github.com/swimlane/ngx-ui</a></p>
  
  <p>I have a list of objects:
  mylist = [{'name':'Apple'},{'name':'Banana'}, {'name':'Pineapple'}]</p>
  
  <p>When I do the following, it looks good:</p>
  
  <pre><code>&lt;a [tooltipPlacement]="'top'" [tooltipType]="'tooltip'" ngx-tooltip [tooltipType]="'popover'" [tooltipPlacement]="'top'" [tooltipTemplate]="popoverTemplate" (mouseover)="tooltipModel.text = 'Apple'"&gt;Apple&lt;/a&gt;                            
  </code></pre>
  
  <p>Problem is when I try to ngFor it like this:</p>
  
  <pre><code>&lt;a *ngFor="let fruit of mylist;" [tooltipPlacement]="'top'" [tooltipType]="'tooltip'" ngx-tooltip [tooltipType]="'popover'" [tooltipPlacement]="'top'" [tooltipTemplate]="popoverTemplate" (mouseover)="tooltipModel.text = 'Apple'"&gt;{{fruit.name}}&lt;/a&gt; 
  </code></pre>
  
  <p>Event though I am hardcoding the tooltip text, the tooltip does not show. Is there a way around this or is the library broken and does not support ngFor?                           </p>
  
  <p>All I want to do is have a tooltip, I tried other packages like angular2-tooltips, which does not work well when you have a nested container. ngx-tooltip attaches tooltips to the body element of the HTML, which makes sure the tooltip is always displayed on top. Am disheartened by the fact there appears to be no easy way to get a good tooltip working. Please help.</p>