title: How to enable Bootstrap4 tooltips inside an Angular app
body: <p>I'm trying to use Bootstrap4 tooltips in an Angular app built using the Angular CLI.</p>
  
  <p>The Bootstrap4 alpha documentation says that I need to run this command in order to enable tooltips:</p>
  
  <pre><code>$(function () {
      $('[data-toggle="tooltip"]').tooltip()
  })
  </code></pre>
  
  <p>So, I've added a ngAfterViewInit() function in the app.component.ts to do that:</p>
  
  <pre><code>ngAfterViewInit() {
      $('[data-toggle="tooltip"]').tooltip();
  }
  </code></pre>
  
  <p>With this in the app html file:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Hi there!"&gt;
      Tooltip Test
  &lt;/button&gt;
  </code></pre>
  
  <p>I do see a tooltip when hovering over the button, but it is just a normal browser tooltip, not a Bootstrap4 tooltip.</p>
  
  <p>At run time, I get the error:</p>
  
  <pre><code>ERROR ReferenceError: $ is not defined
  </code></pre>
  
  <p>Adding this line to the component does not help.</p>
  
  <pre><code>declare var $: any;
  </code></pre>
  
  <p>I've double-checked that the jquery, tether, and boostrap js files are included in that order in the scripts section of the project angular-cli.json file.</p>
  
  <p>Any suggestions how I might get this to work? </p>
  
  <p>Thanks!</p>