2

I have had problems getting Bootstrap popovers working with dynamically created elements (but that's for a different question).

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.

The problem is that whilst the new cloned popovers fire, the popover is in the wrong position.

The HTML looks like this

<div style="display: none">
    <span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>

I then register the popover event on the popoverbottom class using code like this:

$(".popoverbottom").popover( {placement : 'bottom',  trigger: 'hover', delay: { show: 500, hide: 100 }} );

I then clone the element with the popover on it using JQuery code like this:

e = $('#anid').clone(true);
e.attr('id','anewid');

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.

If I make the <div> 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.

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.

Is there a way to tell the popover that it's been cloned and it needs to attach the popover to an new element?

Or, would I be better off trying to get dynamically-created popovers working a la this jsFiddle snippet.

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.

Any advice would be appreciated.

Bletch
  • 486
  • 7
  • 9

1 Answers1

5

I think the problem is that Bootstrap creates the popovers before you've added all the cloned popover nodes to the DOM. You need to register the newly-appended popovers. Don't call $(".popoverbottom").popover() until you've appended all the cloned nodes. $.clone(true) copies events, but it doesn't attach functions. popover() is a function, not an event.

Ringo
  • 5,097
  • 3
  • 31
  • 46
  • Thanks for the response Rick but I'm not sure I understand. Are you saying that once I've cloned the static elements with the popovers attached, I then need to re-call the popover() function? If so then I think I may have a problem with the way popover works. My understanding was that for dynamically created elements (as my cloned ones would be), you need to use the selector: option on the popover, and that is where I have had problems with popovers not hiding properly. – Bletch Sep 15 '12 at 08:46
  • Make this the very last line of your code: $('.popoverbottom').popover() Or call it AFTER every time you clone and append. Does that make sense? – Ringo Sep 15 '12 at 16:02
  • Rich (not Rick - apologies), that did the trick. I didn't realise that I would have to re-call .popover(). But as you say, and for others that might find this question, it appears that because .clone(true) copies elements but not any bound functions, I need to re-state the function. But to be honest, if I have to do this then cloning isn't the solution I'm looking for. So I will now re-investigate the issues I was having with dynamic popovers. Thanks for your help. – Bletch Sep 16 '12 at 07:57
  • bletch, re-reading your original question... yeah, if you're already creating DOM elements that serve as popovers, i don't understand why you would need to clone them and append them. just make the hidden elements themselves into popovers, and un-hide them when you need to. if you provided html along with the js, i could probably give you more specific advice. off-hand, it seems like cloning is not what you want to do. – Ringo Sep 16 '12 at 22:09