title: Bootstrap tool tips look plain
body: <p>Am trying to get a tooltip that has more styling than the plain text that a tool tip normally has.</p>
  
  <p>I see that a Twitter Bootstrap tooltip is black, white text, has an arrow, etc.</p>
  
  <p>My tool tips look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/L1ouM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L1ouM.png" alt="plain tooltip"></a></p>
  
  <p>I have read that to fix this I need to add this:</p>
  
  <pre><code>&lt;script&gt;
     $(function () { $("[data-toggle='tooltip']").tooltip(); });
  &lt;/script&gt;
  </code></pre>
  
  <p>I did that and it has no effect.</p>
  
  <p>The only thing I could possibly think might be affecting it is that this is an Aurelia application and I am doing this in a <code>&lt;template&gt;</code>.</p>
  
  <p><strong>Anything else I can be checking to see why this is not working?</strong></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;template&gt;
       &lt;script src="myPathToJQuery/jquery@2.1.4/jquery.js"&gt;&lt;/script&gt;
       &lt;script src="myPathToBootstrap/twbs/bootstrap@3.3.6/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;button type="button" class="btn btn-default" data-toggle="tooltip"
             data-placement="top" data-html="true" title="&lt;b&gt;Tooltip&lt;/b&gt; &lt;em&gt;on &lt;/em&gt; right"&gt;
          Tooltip on right
      &lt;/button&gt;
  
      &lt;script&gt;
          $(function() { $("[data-toggle='tooltip']").tooltip(); });
      &lt;/script&gt;
  &lt;/template&gt;
  </code></pre>