title: Bind Bootstrap tooltip to dynamically created SVG element with d3
body: <p>I would like to dynamically create an SVG element with d3 and bind a Bootstrap tooltip to it.</p>
  
  <p>In a non-dynamic HTML scenario these tooltips are bound like this:</p>
  
  <pre><code>$('[rel=tooltip]').tooltip
  </code></pre>
  
  <p>Two problems to overcome when doing it dynamically in SVG:</p>
  
  <p><strong>1) HTML divs included in SVG don't render</strong></p>
  
  <p>The solution is to use the <code>container</code> property in the options (<a href="https://stackoverflow.com/a/17120911/1450420">1</a>,<a href="https://stackoverflow.com/a/14736276/1450420">2</a>) which <a href="http://jsfiddle.net/derekhill/Z6CA7/" rel="nofollow noreferrer">works great</a>:</p>
  
  <pre><code>$('[rel=tooltip]'').tooltip({
    container:'body'
  });
  </code></pre>
  
  <p><strong>2) Element doesn't exist at moment page is loaded</strong></p>
  
  <p>The <a href="https://stackoverflow.com/a/10420203/1450420">advice here</a> is to use the <code>selector</code> property which causes tooltip objects to be delegated to the specified targets.  This works:</p>
  
  <pre><code>$('body').tooltip({
    selector: '[rel=tooltip]'
  });
  </code></pre>
  
  <p>The problem arises when I try to combine both approaches (see <a href="http://jsfiddle.net/derekhill/zRFWA/" rel="nofollow noreferrer">fiddle</a>):</p>
  
  <pre><code> $('body').tooltip({
     container: 'body',
     selector: '[rel=tooltip]'
   });
  </code></pre>
  
  <p>This seems to ignore the container property, and attaches the tooltip within the body of the SVG where it is not displayed.  One other problem with this example is that the order of the properties matters - if they are reversed it doesn't work at all.</p>
  
  <p>The question is how can I solve both these problems at the same time?  </p>
  
  <p>One approach that might be cleaner and give more control would be to attach the function directly in d3 on creation of the element, or when a mouse event happens.  I tried:</p>
  
  <pre><code>.on('mouseenter', $(@).tooltip({container: 'body'}));
  </code></pre>
  
  <p>Which gave <code>TypeError: listener.apply is not a function</code></p>
  
  <p>Can you help?</p>