title: Bootstrap tooltip from dynamic HTML not working
body: <p>I have an <code>HTML</code> page that part of it is generated using <code>HTML</code> injection from a <code>typescript</code> <code>angularjs</code> controller using <code>$sce</code> and <code>ng-bind-html</code>.<br>
  My problem is that the <code>bootstrap</code> tooltip style isn't applied and I only get the simple built in yellow tooltip.<br>
  My controller function that generates the HTML (not sure if it's relevant but note the comment next to the <code>console.log</code> section):</p>
  
  <pre><code>public renderHtml = () =&gt; {
  this.test = '&lt;span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top"&gt;my team&lt;/span&gt;';
  console.log(this.test); // this line is logged 6 times with the same value on each page refresh
  
  return this.$sce.trustAsHtml(this.test);
  }
  </code></pre>
  
  <p>The HTML (I've added the exact same HTML snippet directly to the page and it works fine):</p>
  
  <pre><code>&lt;!--bootstrap tooltip doesn't show--&gt;
  &lt;div class="row margin-25" ng-bind-html="cdc.renderHtml()"&gt;&lt;/div&gt;
  
  &lt;div&gt;
  &lt;!--bootstrap tooltip works--&gt;
  &lt;span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top"&gt;my team&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the outcome (not working on left):
  <a href="https://i.stack.imgur.com/Ki5EQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ki5EQ.png" alt="tooltips"></a></p>