Popover selector option not working #2091

Closed
yuvadm opened this Issue Feb 19, 2012 · 13 comments

Comments

Projects
None yet
10 participants

yuvadm commented Feb 19, 2012

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 commented Feb 20, 2012

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()
  });
});

@yuvadm yuvadm closed this Feb 20, 2012

oller commented Jun 21, 2012

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?

benvds commented Jul 9, 2012

+1 this is confusing indeed

'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 commented Jul 15, 2012

Ok it now makes sense. Thx Jake!

Exactly what I was looking for, thanks Jake!

gokulj commented Dec 1, 2012

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

+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.

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?

I same question








dont work

rh01 commented Nov 8, 2017

same question

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment