title: Dynamically position Bootstrap tooltip (for dynamically generated elements)
body: <p>I am using the Tooltips provided by Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).</p>
  
  <p>I have some dynamically inserted markup in my DOM which needs to trigger the tooltips. That's why I trigger tooltips in the following way (https://github.com/twitter/bootstrap/issues/4215):</p>
  
  <pre><code>$('body').tooltip({
      delay: { show: 300, hide: 0 },
      selector: '[rel=tooltip]:not([disabled])'
  });
  </code></pre>
  
  <p>To avoid tooltips being placed too close to the edge of the screen, I need to be able to set their position dynamically based on where the element which triggers the tooltip is positioned. I thought of doing it the following way:</p>
  
  <pre><code>   $('body').tooltip({
          delay: { show: 300, hide: 0 },
          // here comes the problem...
          placement: positionTooltip(this),
          selector: '[rel=tooltip]:not([disabled])'
      });
  
  
  
  function positionTooltip(currentElement) {
       var position = $(currentElement).position();
  
       if (position.left &gt; 515) {
              return "left";
          }
  
          if (position.left &lt; 515) {
              return "right";
          }
  
          if (position.top &lt; 110){
              return "bottom";
          }
  
       return "top";
  }
  </code></pre>
  
  <p>How can I pass currentElement correctly to the positionTooltip function in order to return the appropriate placement value for each tooltip?</p>
  
  <p>Thanks in advance</p>