Bootstrap: Popover selector option not working

[yuvadm]

When using the selector popover option, nothing actually happens:

<div id="some-div">
  <span>Some stuff</span>
</div>

<div id="popover-element">
  <p>This is the popover text</p>
  <p>But it also gets complicated...</p>
</div>

and:

$(document).ready(function() {
  $('#some-div').popover({
    selector: $('#popover-element') // also tried just '#popover-element', same result
  });
});

If I revert back to just a data-content:

<div id="some-div" data-content="hai">

then things work fine, but I need more than just text in the popover.

[yuvadm]

Oops. I'm doing it wrong. I thought selector binds the popover content to a specific selector, which is absolutely not the case.

What I'm trying to do is totally doable with this code:

$(document).ready(function() {
  $('#some-div').popover({
    content: $('#popover-element').html()
  });
});

[oller]

Only dragging this back up, as I can't actually decipher what the selector: option should do.

"if a selector is provided, tooltip objects will be delegated to the specified targets"

I've tried giving it other another selector i.e.'#example'

The popover doesn't load up, i'm not sure if this selector attribute changes the hover target, or the target of where the popover is rendered?

[sebastien-worms]

+1

[benvds]

+1 this is confusing indeed

[jakepetroules]

'selector' is used internally in conjunction with jQuery.on in order to allow markup dynamically inserted in the DOM, to trigger tooltips and popovers. This certainly needs better documentation. I've created an interactive jsFiddle illustrating the usage of 'selector'; I hope it will be of help to someone.

http://jsfiddle.net/KPeKS/4/

[benvds]

Ok it now makes sense. Thx Jake!

[stevebritton]

Exactly what I was looking for, thanks Jake!

[gokulj]

+1 thanks to Jake. This should be required reading for anyone using the bootstrap JS plugins with dynamically created HTML !!

[leadVisionary]

+1. Plz update the bootsrap docs with a link to the fiddle. This continues to be confusing in the docs a year after the issue was raised.

[leadVisionary]

Jake's fiddle is nice, but I feel like yuvadm raises an excellent point about the API itself.

It feels like there _should be_ an attribute you can give to the popover options object that's just "here's the id/selector of some already existing HTML element that I want to use as the popover". This is a pretty good example of a case of surprising expectations.

Being able to inline everything in attributes and not use JS is nice. But if you require icons/images or anything more complex than just text clearly you won't be able to do that. Plus, even more than a sentence or two may make the markup of the element getting the popover overly complicated with all that text in the data- attribute.

Although the solution of using a jQuery selector and calling .html() in the content property "works", it'd be nice to see some syntax sugar/first class support for this use-case. Maybe an "element" property?

[yanhaijing]

I same question

[yanhaijing]

dont work

[rh01]

same question