title: How can I dynamically insert a new template into the DOM with Ember?
body: <p>I have an Ember.js app. In the main template I have a help button that when clicked should display a CSS tooltip. I have the tooltip is a separate Handlebars template.</p>
  
  <p>What I'm trying to do is handle the click event to insert the popup into the DOM and display it.  I cannot figure out how to insert new templates into the DOM using Ember.</p>
  
  <p>Here's my template where the help button is displayed:</p>
  
  <pre><code>&lt;div id="status_help" class="icon_help" {{action "helpClicked"}}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's my primary view:</p>
  
  <pre><code>var checkbox = Ember.Checkbox.extend({
      templateName: 'checkbox',
      helpClicked: function(e) {
          // Not sure what to do here
      }
  }));
  
  var tooltip = Ember.View.extend({
      templateName: 'tooltip'
  });
  </code></pre>
  
  <p>So I'm not sure what to do in the event handler to render the tooltip template and inject it into the DOM to be displayed.</p>