title: How do I create an AngularJS tooltip directive with a compiled template?
body: <p>I've searched the internet long and hard and found no straight answer. My question is simple, I want to have something like this in my markup:</p>
  
  <pre><code>&lt;div my-tooltip-template="'mytt.tpl.html'" my-tooltip-scope="myDataItem"&gt;Some text...&lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> Where <code>myDataItem</code> is a scope variable which contains my data object, and with a template which might look like:</p>
  
  <pre><code>&lt;h1&gt;{{dataItem.title}}&lt;/h1&gt;
  &lt;span&gt;{{dataItem.description}}&lt;/span&gt;
  </code></pre>
  
  <p>And I want to have that template compiled with the a scope which contains <code>myDataItem</code> as <code>dataItem</code> and displayed as a tooltip. As far as I could tell by experimenting with <code>ui-bootstrap</code> <code>tooltip</code> module, the way to inject html into a tooltip is by using the directive <code>tooltip-html-unsafe</code> but the html injected doesn't get compiled, i.e., angular expressions are not evaluated, directives are not expanded, etc.</p>
  
  <p>How do I go about creating a directive for this? I want a lean result, I don't want to have to include jQuery or any other library, just AngularJS and ui-bootstrap.</p>
  
  <p>Thanks a lot!</p>