Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover selector option not working #2091

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

Popover selector option not working #2091

yuvadm opened this issue Feb 19, 2012 · 13 comments
Labels

Comments

@yuvadm
Copy link

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
Copy link
Author

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 as completed Feb 20, 2012
@oller
Copy link

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?

@sebastien-worms
Copy link

+1

@benvds
Copy link

benvds commented Jul 9, 2012

+1 this is confusing indeed

@jakepetroules
Copy link

'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
Copy link

benvds commented Jul 15, 2012

Ok it now makes sense. Thx Jake!

@stevebritton
Copy link

Exactly what I was looking for, thanks Jake!

@gokulj
Copy link

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 !!

@leadVisionary
Copy link

+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
Copy link

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
Copy link

I same question

@yanhaijing
Copy link








dont work

@rh01
Copy link

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
Labels
Projects
None yet
Development

No branches or pull requests

10 participants