title: Material Design Lite tooltips not working with Angular 2
body: <p>I'm playing around with both Angular 2 and Material Design Lite.  However, many of the Material Design Lite components seem to break when placed inside an Angular 2 component template.</p>
  
  <p>For instance</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
   selector: 'this-app',
   templateUrl: 'app/app.component.html'
  })
  export class AppComponent {
    public message : string = "This is my Application" ;
    public menuItems : string[] = ["Personnel", "Contacts", "Accounting"];
    public appTitle : string = "Gravity HR";
    public messages : string[] = ["message 1", "Message 2", "Message 3 ", "Message 4"];
  }  
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;main class="mdl-layout__content"&gt;
    &lt;div class="page-content"&gt;
      &lt;h1&gt;{{message}}&lt;/h1&gt;
      &lt;div id="inbox1" class="fa fa-inbox fa-2x fa-fw  mdl-badge mdl-badge--overlap" data-badge="4"&gt;&lt;/div&gt;
      &lt;div for="inbox1" class="mdl-tooltip"&gt;You have {{messages.length}} messages&lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>The tooltips in this code will not display.  However if I copy the code outside of the angular 2 component, the tool tip displays. <a href="http://plnkr.co/edit/ahrCiKaKgVwmwQJbfCV6?p=preview" rel="noreferrer">See Plunker example</a></p>
  
  <p>Also, the other thing I would like to be able to do is bind to the data-badge property of the div kind of like this:</p>
  
  <pre><code>&lt;div id="inbox1" class=... data-badge={{messages.length}}&gt;
  </code></pre>
  
  <p>That doesn't seem to work -- I'm guessing because data-badge isn't a true property of the div tag?</p>
  
  <p>Thanks for your help.</p>