title: Angular 5 + Bootstrap Tooltip Not Working
body: <p>What am I doing wrong? </p>
  
  <p>I'm trying to get a <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" rel="noreferrer">Bootstrap Tooltip</a> to work in Angular 5. We have the Javascript library set up via the footer of the index.html page, as recommended. The documents on Bootstrap use JQuery to get ahold of the elements, then call the <code>tooltip()</code> function on them.</p>
  
  <p>Thinking I might be able to do the same, but using the <code>getElementById</code> function to obtain a handle on the button, I wrote the following (the button is the item that has a tooltip defined on it):</p>
  
  <pre><code>  ngAfterViewInit(){
      let button = document.getElementById('tooltipBtn');
      button.tooltip();
    }
  </code></pre>
  
  <p>Template code (separate file):</p>
  
  <pre><code>&lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="tooltipBtn"&gt;
    Tooltip on bottom
  &lt;/button&gt;
  </code></pre>
  
  <p>The error I get (in the browser console):</p>
  
  <pre><code>ERROR
  Error: button.tooltip is not a function
  </code></pre>