How do I use the bootstrap popover to display the content of a sibling or child element?

Question

I am trying to get the bootstrap popover to display contextual content based on what element is being setup with popover.

Here's some example markup:

<div class="user">
    <img src="foo.jpg" />
</div>
<div class="userInfo">
    <p>He likes pie!</p>
</div>

<div class="user">
    <img src="bar.jpg" />
</div>
<div class="userInfo">
    <p>He likes cake!</p>
</div>

The script to setup the popover:

$('.user').popover({
    trigger: 'hover',
    placement: 'top',
    html: true,
    content: //What goes here?  I want to display the contents of the userInfo class
});

The expected result when I hover over the user class would be to show a popover displaying the content contained in the sibling or child userInfo class.

My markup can be flexible; I can move the userInfo class to be a child, sibling, parent, etc.

Solution

Yeah I would put the .userInfo inside of .user, then iterate over $('.user') and set the content for each .user separately (in your example you are setting the same content for all the popovers.

Example:

<div class="user">
  user 1
  <div class="userInfo">
    <p>He likes pie!</p>
  </div>
</div>

<div class="user">
  user 2
  <div class="userInfo">
    <p>He likes cake!</p>
  </div>
</div>

Javascript:

$('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.find('.userInfo').html()  
  });
});

Here is a working jsfiddle (added some extra css): http://jsfiddle.net/hajpoj/CTyyk/5/

Comments

[Justin Helgerson]

Thanks! I'm not sure why I didn't think to call .each()... that makes it easy as pie!