title: Bootstrap tooltip/popover not showing properly
body: <p>I'm using Angular 2 to build my web application. When I try to put a tooltip or popover on an image or button, I get the <a href="https://picasaweb.google.com/lh/photo/qH0bi9OT3g2w1WakseL_ziOBG2bGE-R0SjQZqsLNf_4" rel="nofollow">default-looking tooltip</a> instead of the bootstrap one.</p>
  
  <p>I've tried the <a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&amp;stacked=h" rel="nofollow">basic W3Schools examples</a> and did everything as shown, yet it doesn't work.</p>
  
  <p>I believe my problem lies with the correct imports of the bootstrap.js or jQuery, but other bootstrap items like buttons etc. do work properly.</p>
  
  <p>(I use nodejs to install the necessary files/dependencies -> <code>npm install</code> <code>npm install bootstrap</code> <code>npm install jquery</code>)</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;base href="/"&gt;&lt;!--Without this tag, the browser may not be be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into the browser's address bar or clicks such a link in an email link. --&gt;
      &lt;title&gt;Factory&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="/css/styles.css"&gt;
  
      &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
      &lt;script src="/node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
  
      &lt;!--&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;--&gt;
      &lt;!--&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;--&gt;
  
      &lt;!-- stackoverflow suggested settings --&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          System.config({
              packages: {
                  app: {
                      format: 'register',
                      defaultExtension: 'js'
                  }
              }
          });
          System.import('app/boot')
                  .then(null, console.error.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;my-app&gt;&lt;/my-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>page-with-tooltip(.ts)</strong></p>
  
  <pre><code>import {Component} from "angular2/core";
  import ... from ...;
  import ... from ...;
  ...
  
  @Component({
      template: `
  
  &lt;div *ngIf="hall" class="container"&gt;
      &lt;h2&gt;Detail van hal &lt;small&gt;{{hall.name}}&lt;/small&gt;&lt;/h2&gt;
      &lt;a href="#" data-toggle="tooltip" title="Hooray!"&gt;Hover over me&lt;/a&gt;
      &lt;div class="container"&gt;
          &lt;div class="hall-box-single"&gt;
              &lt;div class="hall-box"
                  [style.width]="hall.areaWidth*4"
                  [style.height]="hall.areaHeight*4"&gt;
                  &lt;div class="image-container"&gt;
                  &lt;div *ngFor="#item of hall.items"&gt;
                      &lt;a data-toggle="tooltip" title="Popover title"&gt;
                      &lt;img [src]="item.image"
                           [style.left]="item.posX"
                           [style.top]="item.posY"/&gt;
                       &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $('[data-toggle="tooltip"]').tooltip();
      });
  &lt;/script&gt;
  `})
  
  export class HallDetailComponent implements OnInit {
      ...
      constructor(...) {
          ...
      }
  
      ngOnInit() {
          ...
          (&lt;any&gt;$('[data-toggle="tooltip"]')).tooltip();
          $('[data-toggle="tooltip"]').tooltip();
      }
  }
  </code></pre>
  
  <p><strong>!Edit!</strong></p>
  
  <p>Added suggestions from users as well as an extract of the <a href="http://pastebin.com/rZNEetFD" rel="nofollow">running webpage source</a>.</p>