title: Cloning elements that have Twitter Bootstrap popover produces a popup in the wrong place
body: <p>I have had problems getting Bootstrap popovers working with dynamically created elements (but that's for a different question). </p>
  
  <p>So as a workaround, and because the content of these popover elements is not actually dynamic itself, I decided to create a series of hidden  elements with popovers that are already in the DOM when the HTML loads. I then planned to clone them using JQuery's clone() and place them where I need them.</p>
  
  <p>The problem is that whilst the new cloned popovers fire, the popover is in the wrong position.</p>
  
  <p>The HTML looks like this</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="display: none"&gt;
      &lt;span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content"&gt;TAG&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then register the popover event on the popoverbottom class using code like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".popoverbottom").popover( {placement : 'bottom',  trigger: 'hover', delay: { show: 500, hide: 100 }} ); 
  </code></pre>
  
  <p>I then clone the element with the popover on it using JQuery code like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>e = $('#anid').clone(true);
  e.attr('id','anewid');
  </code></pre>
  
  <p>I then append() the new element dynamically and it appears fine. If I hover over it, a popover fires, but it appears in the top left hand corner of the browser window - half cut off on the left hand side. </p>
  
  <p>If I make the &lt;div&gt; containing the popover elements visible - i.e. remove the display:none, then the popover appears over the original, non-dynamically created DOM element instead of the new cloned one.</p>
  
  <p>This is obviously because when the popover was registered, the popover was tied to the original element. Whilst JQuery's .clone(true) appears to copy the element and the associated events, the original popover position isn't updated.</p>
  
  <p>Is there a way to tell the popover that it's been cloned and it needs to attach the popover to an new element?</p>
  
  <p>Or, would I be better off trying to get dynamically-created popovers working a la <a href="http://jsfiddle.net/KPeKS/4/" rel="nofollow">this jsFiddle snippet</a>. </p>
  
  <p><i>As mentioned above, I did try to get this dynamic approach to work but had issues where multiple popovers would stay on the screen and not hide when the mouse moved away - but that's for another question</i>.</p>
  
  <p>Any advice would be appreciated.</p>